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:
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
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