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.