Title: Changing font using css code
Last modified: September 1, 2016

---

# Changing font using css code

 *  Resolved [urielc](https://wordpress.org/support/users/urielc/)
 * (@urielc)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/changing-font-using-css-code/)
 * Hey.
 * I managed to change the font type and color when typing, using css code.
    Its
   working great on all browsers.
 * But, when I try to change the font type and color of the “type here” text (the
   text that you see before start typing), it’s not taking effect on chrome.
 * In Firefox & IE the change taking effect, but in chrome it’s not.
 * It’s look like the chrome still using it’s own setings of fonts, but only in 
   that elemnet.
 * Can I force chrome to use my own font & color based on the css code?
 * This is the css code that I use on my site:
 * >  .wpdreams_asl_container *, .wpdreams_asl_results * {
   >  font-size: 16px !important;
   > font-family: alef, sans-serif, arial !important; direction: rtl; text-align:
   > right !important; }
   > div[id*=”ajaxsearchlite”] .probox .proinput input::-moz-placeholder {
   >  font-
   > family: alef, sans-serif, arial !important; color: rgb(59, 169, 189) !important;
   > font-weight: bold; font-size: 15px; }
   > #ajaxsearchlite1 .probox .proinput input, div[id*=”ajaxsearchlite”] .probox.
   > proinput input {
   >  font-weight: bold; font-family: alef, sans-serif, arial !
   > important; color: rgb(59, 169, 189) !important; font-size: 16; line-height:
   > normal !important; }
   > #ajaxsearchlite1 .probox, div[id*=”ajaxsearchlite”] .probox {
   >  border: transparent;}
 * Thanks!
 * [https://wordpress.org/plugins/ajax-search-lite/](https://wordpress.org/plugins/ajax-search-lite/)

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Author [wpdreams](https://wordpress.org/support/users/wpdreams/)
 * (@wpdreams)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/changing-font-using-css-code/#post-7558974)
 * Hi!
 * You did a great job, there is one more thing you need though. Setting placeholder
   styles needs a special CSS code, otherwise it won’t work properly.
 * I believe this should solve your problems:
 *     ```
       input.orig::-webkit-input-placeholder {
         font-weight: bold;
         font-family: alef, sans-serif, arial !important;
         color: rgb(59, 169, 189) !important;
         font-size: 16;
         line-height: normal !important;
       }
   
       input.orig:-moz-placeholder { /* Firefox 18- */
         font-weight: bold;
         font-family: alef, sans-serif, arial !important;
         color: rgb(59, 169, 189) !important;
         font-size: 16;
         line-height: normal !important;
       }
   
       input.orig::-moz-placeholder {  /* Firefox 19+ */
         font-weight: bold;
         font-family: alef, sans-serif, arial !important;
         color: rgb(59, 169, 189) !important;
         font-size: 16;
         line-height: normal !important;
       }
   
       input.orig:-ms-input-placeholder {
         font-weight: bold;
         font-family: alef, sans-serif, arial !important;
         color: rgb(59, 169, 189) !important;
         font-size: 16;
         line-height: normal !important;
       }
       ```
   
 * I have found this solution a long time ago on google, and so far it always worked
   🙂
 *  Thread Starter [urielc](https://wordpress.org/support/users/urielc/)
 * (@urielc)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/changing-font-using-css-code/#post-7559011)
 * So,
    First of all, thank you for your detailed answer! I realy appreciate it.
 * I’ve tried your code, but it doesn’t work 🙁
 * BUT,
    **Your code inspired me 🙂**
 * So I did a little research about “placeholder”, and I managed to write this code:
 * >  div[id*=”ajaxsearchlite”] .probox .proinput input.orig::-webkit-input-placeholder{/*
   > Chrome/Opera/Safari */
   >  font-weight: bold; font-family: alef, sans-serif, arial!
   > important; color: rgb(59, 169, 189) !important; font-size: 16; line-height:
   > normal !important; }
 * And it’s working great on all browsers, including Chrome!
    This is great, you
   made my day.
 * Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Changing font using css code’ is closed to new replies.

 * ![](https://ps.w.org/ajax-search-lite/assets/icon-256x256.png?rev=3192672)
 * [Ajax Search Lite - Live Search & Filter](https://wordpress.org/plugins/ajax-search-lite/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/ajax-search-lite/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/ajax-search-lite/)
 * [Active Topics](https://wordpress.org/support/plugin/ajax-search-lite/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/ajax-search-lite/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/ajax-search-lite/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [urielc](https://wordpress.org/support/users/urielc/)
 * Last activity: [9 years, 11 months ago](https://wordpress.org/support/topic/changing-font-using-css-code/#post-7559011)
 * Status: resolved