One of the coolest things about WordPress 3.2 is its “distraction-free writing” mode. I’ve been eagerly awaiting using this feature on my own sites for months. Unfortunately, WordPress 3.2 also shipped with a font change for the HTML editor to a monospace font, which isn’t so distraction free when you’re trying to write.

Sure, I could switch over to the visual editor, but I hate the visual editor more than I hate people who kill kittens for fun. I haven’t used it in at least four years and will likely not be switching over any time soon.

There is a growing group of people who would like to see the font reverted. However, Matt Thomas does have a reasonable argument for the change to a monospace font.

Let’s not focus on the argument over what fonts to use though. WordPress makes this extremely easy to change. It only takes a few lines of code.

How to change the font

In your theme’s functions.php file or in a plugin file, add the following lines of code to change the font stack.

add_action( 'admin_head-post.php', 'my_fix_html_editor_font' );
add_action( 'admin_head-post-new.php', 'my_fix_html_editor_font' );

function my_fix_html_editor_font() { ?>
<style type="text/css">#editorcontainer #content, #wp_mce_fullscreen { font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif; }</style>
<?php }

This will give you a font stack of:

• Georgia
• Times New Roman
• Bitstream Charter
• Times
• serif

You are, of course, free to change this font to whatever you want. I’m about to play around with my font size and line height a bit to make the writing experience even more enjoyable.

What the change looks like

The original font will look like the following screenshot.

The new look, using the code from above, will look like the next screenshot.