How to change the WordPress admin area text field/edit post font

After upgrading to WordPress version 3.3.1 recently, I was puzzled and frustrated to find that the text in the text area/entry field where you type the content of each post (the Add New Post page or /wp-admin/post-new.php) looked funky, awkward, and all mono-spacey. I knew this was obviously the fault of some new CSS file I had “upgraded” to with the new WordPress release, but I had no idea how to find the offending bit of code in the mass of files that comes with WordPress. Well, Googling key words like “wordpress”, “font”, “text”, and even “admin area” gave me mostly tutorials and discussion threads about how to change fonts displayed on websites run by WordPress. But eventually I found this post by Martin Brinkmann at ghacks.net, who is a gentleman and a scholar and who explains that the offending string of CSS is in the file wp-admin.css located in the wp-admin/css directory, which specifies that #editorcontainer should have the font-family Consolas, Monaco, monospace.

That apparently is no longer true in WordPress 3.3.1. The wp-admin.css file has no editorcontainer text anywhere in the document, and I changed a few Consolas,Monaco,monospace fonts to something a human would like to type with, to no effect. (No effect that I have noticed yet.)

So I simply did what I should have done from the beginning: used Firebug to determine what CSS selector was specified for this text box/entry field and what CSS document it was located in. It was wp-includes/css/editor-buttons.css, and the CSS selector was wp-editor-area. Therefore, to correct this stupid lapse on WordPress’s end, you can either download the WordPress .zip file to a temporary place like your Desktop, unzip it there, and find wp-includes/css/editor-buttons.css, or connect to your home directory with an FTP program like Filezilla to download the editor-buttons.css file that WordPress automatically placed on your server. Open editor-buttons.css with a text editor or more advanced programming software, and search for:

wp-editor-area

Immediately or shortly after that text should be:

{font-family:Consolas,Monaco,monospace; …

I recommend just deleting those three fonts and adding normal fonts in their place, like so:

{font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif; …
[or, you know, whatever other good fonts you want]

Don’t delete the semicolon!

Finally, use an FTP program to upload the new file to your home directory/wp-includes/css/, overwriting the old file.

It turns out that using the Visual editor option to edit posts (and pages, I’m sure), as opposed to the HTML option, uses a normal font like Verdana or something, but I hate the visual editor. I always feel like I know exactly what I’m getting with the HTML editor and can control everything better with it.

So if you’re annoyed like I am at the puzzling decision to change the font of the text in the edit post/edit page text boxes in the wp-admin interface, you have Martin Brinkmann to thank for finding the offending code and pointing us in the right direction.

This entry was posted in Blagging, Morans. Bookmark the permalink.

5 Responses to How to change the WordPress admin area text field/edit post font

  1. Pingback: How To Change The Wordpress Admin Interface Fonts

  2. R J Adams says:

    Thank you very much for that information. I’ve hated the HTML editor since updating to WP3 and have searched the files to try and ascertain how to change the font, without success. Like you, I prefer the HTML editor as it gives more control. Thanks again.

  3. Steven Jones says:

    You shouldn’t be changing the core files of WordPress, you should be applying CSS to the admin_head hook in your functions.php file instead.

  4. Marc Bonne says:

    Thank you for finding that! It took me most of the day, but I finally tracked down the css for the VISUAL editor, too. It’s in wp-includes/js/thickbox/thickbox.css.

  5. Chris Rand says:

    Looks like it’s changed again folks. Or there’s no wp-includes/css/editor-buttons.css in my latest WordPress installation, anyway. However, the same CSS above does appear in a file called editor.css in the same directory, so I’m off to try things with that.

    Steven’s suggestion above sounds more future-proof, I’d like to know more about how to do that.

Leave a Reply

Your email address will not be published. Required fields are marked *