How to Change The Font Of WordPress 3.2 HTML Editor [Quick Tips]

If you are using WordPress and have recently upgraded to the latest 3.2.x version, you will notice that the font for the HTML editor has changed. In most WordPress upgrade, changes are good, but in this case, the changed font is not web friendly and is straining to the eyes.

wp-new-editor-font

One of the way to change it is to directly edit the wp-admin.css file under the “wp-admin -> css” folder. This is not a good solution because the next time you upgrade your WordPress, your files will be overwritten.

The best way is to insert a small function to your functions.php.

Open your functions.php file in your Themes folder.

Add the following code to the end of the file:

add_action( 'admin_head-post.php', 'fix_html_editor_font' );
add_action( 'admin_head-post-new.php', 'fix_html_editor_font' );
 
function fix_html_editor_font() { ?>
    <style type="text/css">
        #editorcontainer #content, #wp_mce_fullscreen {
            font-family: Tahoma,Verdana,Arial,Helvetica;
        }
    </style>
<?php }

You can change the font-family to the one you like. I personally prefer the Tahoma and Verdana font family.

Save and upload the functions.php file back to the server. This is the result:

wp-restored-font

That's it.

Damien
Damien

Damien Oh started writing tech articles since 2007 and has over 10 years of experience in the tech industry. He is proficient in Windows, Linux, Mac, Android and iOS, and worked as a part time WordPress Developer. He is currently the owner and Editor-in-Chief of Make Tech Easier.

Subscribe to our newsletter!

Our latest tutorials delivered straight to your inbox