Change WordPress HTML Editor Font

WordPress 3.2 comes up with various features, from it’s “distraction-free writing” that so cool, until monospace font in the HTML editor which isn’t so distraction free when you’re trying to write. Although already familiar with the same font when coding with Notepad++ it feels very uncomfortable when writing post using a monospace font. Moreover, I was the one who didn’t really like using the visual editor. Then how to solve this problem? In this WordPress tutorial I’ll show you how to change font in the WordPress HTML post editor.

To change the font in the HTML editor we need only add a few lines of code into our WordPress theme. What to do first is open the file functions.php in the theme folder and add the code below.

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

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

This will change the font used on the HTML editor from monospace to Georgia. You are, of course, free to change this font to whatever you want by changing font-family. For example, you want to use Arial, then you have to do is change the line font-family: Georgia, "Times New Roman", Times, serif; to font-family: Arial, Helvetica, Sans-Serif;

What the change looks like? see the following screenshot.

wordpress tutorial fix change html post editor monospace font

I hope this quick tip will help you to change your WordPress HTML post editor font.

Leave a Reply