How To Change The WordPress Admin Interface Fonts
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.
To change the WordPress admin interface to this
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
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..
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;
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…
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
@Rudy:
In WordPress 3.3.1, the offending CSS selector is actually “wp-editor-area” in the file /wp-includes/editor-buttons.css
@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.
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?
Phew! I prefer verdana on my screen, because the text is easier to read and larger. Thanks for the tip!
Worked like a charm! Easier on the eyes – thanks so much!
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+.
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%;
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.
Great! It works,
Thank you :-)
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.
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
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/
Johan, well it is a CSS file, not something that is needed for blog operation per se, I’d say.
Now to change all the fonts back to the way they were. That’s my task for tonight. God this change was terrible.
You’re a lifesaver.