How To Change The WordPress Admin Interface Fonts

Martin Brinkmann
Jul 5, 2011
Updated • Jan 27, 2012
Development
|
26

With the release of WordPress 3.2 came a redesign of the admin interface, and with that a gruesome new font, line heights and margins. The new design looked that terrible that I - for the first time ever - switched from the plain HTML editor to the visual editor. The visual editor uses an eye pleasing font and layout.

It is still a mystery to me why the developers thought it was a good idea to change the default plain HTML editor textarea font in the WordPress admin interface.

If you are like me, you prefer the old font, especially if you are used to working with the HTML editor of the admin area.

It is thankfully though not complicated to switch back to the old font. All you need to do is to replace or edit one file of your WordPress installation.

CSS is used both on the blog's frontend and backend to format elements. Lets take a look at the new font of the WordPress 3.2 admin interface.

wordpress 32 admin interface
new wordpress font

To change the WordPress admin interface to this

wordpress admin font

you need to edit the file wp-admin.css located in the wp-admin/css directory. Make a backup of the file before you start editing it. Open it in your favorite text editor and search for the string #editorcontainer

You should see code that looks like the following:

#editorcontainer #content{font-family:Consolas,Monaco,monospace;padding:6px;line-height:150%;border:0

Notice the font-family setting? To change the font all you need to do is to add another font in front. I have added Verdana which you can see in the second screenshot of the admin interface. The code for Verdana would look like this

#editorcontainer #content{font-family:Verdana,Consolas,Monaco,monospace;padding:6px;line-height:150%;border:0

You can also change the padding and line-height there to get better values as well if you want.

I know that some of you may not be comfortable editing css files on their own. I have uploaded the new wp-admin.css file to my server, and you can download it from this link: wp-admin.css.

Just copy the file to the wp-admin/css/ section of your WordPress blog and you should see the new font when you reload the admin page. The only change in the file is the new font. If you want to change line height, padding or other values you need to do that on your own.

Update: Files and edits you need to edit have changed in WordPress 3.3.1 as John Petrie points out. It is now necessary to edit the wp-includes/editor-buttons.css file, and change the style information of wp-editor-area. Thanks John for posting your solution.

Advertisement

Previous Post: «
Next Post: «

Comments

  1. vahid said on December 15, 2012 at 8:01 pm
    Reply

    Ohh I just don’t know how I can thank you. that’s awesome. you know in English the font is not really bad but in Persian it’s awful..

  2. Rudy said on October 23, 2012 at 7:23 pm
    Reply

    GOT IT! The fix for WordPress 3.4.2 is as follows.
    (1) The edit this time is in the following file:
    wp-includes/css/editor.css

    (2) Search for “Consolas” to find this bit of code:
    #mceModalBlocker{background:#000}.wp-editor-area{font-family:Consolas,Monaco,monospace;padding:10px;

    (3) Do two edits to the code, changing perferred font to Verdana, and changing font-size to a more comfortable 125%:
    #mceModalBlocker{background:#000}.wp-editor-area{font-family:Verdana,Consolas,Monaco,monospace;font-size:125%;padding:10px;

  3. Rudy said on October 19, 2012 at 1:44 am
    Reply

    Oh, oh, the fix that John and I described doesn’t seem to work for WordPress 3.4.2 But it was okay in ver 3.4.1
    Still checking…

  4. Rudy said on January 26, 2012 at 10:15 pm
    Reply

    I meant
    /wp-includes/css/editor-buttons.css
    whew!
    by the way nothing happens if you change the value in the similarly named file
    /wp-includes/css/editor-buttons.dev.css

  5. John said on January 26, 2012 at 9:31 pm
    Reply

    @Rudy:

    In WordPress 3.3.1, the offending CSS selector is actually “wp-editor-area” in the file /wp-includes/editor-buttons.css

    1. Rudy said on January 26, 2012 at 10:14 pm
      Reply

      @John,

      Yes! Thanks. Slight correction in the directory location you gave.

      The file is “wp-editor-area” in the file /wp-includes/css/editor-buttons.cssis

      I eplaced the font-family specification with this:

      font-family:Verdana,Consolas,Monaco,monospace;font-size:125%;

      I add the font-size change to make it easier to read.

  6. Rudy Rucker said on December 20, 2011 at 4:43 am
    Reply

    This was a wonderful fix…but it doesn’t work on WordPress 3.3. First of all, that entry you mention isn’t present, not #editorcontainer field.

    In desperation I did a Search and Replace and changed every frikkin instance of “Consolas” to “Georgia” in my wp-admin/css folder. No joy. I still see that ugly Consolas in my HTML post edit pane. So I undid that rash move.

    But now what?

  7. Adriana said on July 7, 2011 at 4:24 pm
    Reply

    Phew! I prefer verdana on my screen, because the text is easier to read and larger. Thanks for the tip!

  8. Cindi said on July 7, 2011 at 5:35 am
    Reply

    Worked like a charm! Easier on the eyes – thanks so much!

  9. Ramona said on July 6, 2011 at 9:36 pm
    Reply

    Wow, thank you so much! I updated all my websites today and was searching for this solution. Many other users also want to change the font. That’s why I sent this link via Twitter and Google+.

  10. Rudy Rucker said on July 6, 2011 at 6:57 pm
    Reply

    Wonderful! As an additional hack I changed the size of my edit font by inserting this snippet right after after the list of fonts.
    font-size:125%;

  11. Miriam Schwab said on July 6, 2011 at 3:50 pm
    Reply

    I felt bad to complain about the new fonts and line heights, but I’m glad to hear I’m not the only one who thinks things look pretty bad now in the admin. The old admin was so elegant. Sigh.

  12. Dan said on July 5, 2011 at 7:30 pm
    Reply

    Great! It works,
    Thank you :-)

  13. Brandon said on July 5, 2011 at 7:25 pm
    Reply

    I think what Johan was getting at though is the next time the core is upgraded that file is going to be overwritten. I think a better option is to add a function to the theme’s functions.php file that overwrites that CSS instead. This would also serve to remove that terrible drop shadow behind the text as well.

  14. chodorowicz said on July 5, 2011 at 7:24 pm
    Reply

    The problem is that it’s probably gonna be overwritten quite often when you upgrade you WP install, but there’s quite easy and elegant way to change this font. In you functions.php file in theme folder add add_editor_style(); and them create editor-style.css in theme folder and put the styles there

  15. Johan said on July 5, 2011 at 6:00 pm
    Reply

    Although I can understand your grievance, I don’t think it is a good idea to hack core files.

    I would suggest adding the styles to this plugin I made that removes the shadow from the menu bar: http://www.vanderwijk.com/updates/remove-wordpress-3-2-admin-shadow-plugin/

    1. Martin Brinkmann said on July 5, 2011 at 6:06 pm
      Reply

      Johan, well it is a CSS file, not something that is needed for blog operation per se, I’d say.

  16. Bill Roehl said on July 5, 2011 at 4:37 pm
    Reply

    Now to change all the fonts back to the way they were. That’s my task for tonight. God this change was terrible.

  17. Bill Roehl said on July 5, 2011 at 4:22 pm
    Reply

    You’re a lifesaver.

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.