This is a much more technical post than usual for WPbonbons, but I’ve spent a good bit of time figuring it out and wanted to share.
In version 3.2.1, the HTML editor font was changed from Verdana to Consolas, a monospaced font that (to my eyes and those of many others) is ugly and hard to read.


Ok, it’s a small thing. But it’s an annoyance.
To fix it in WordPress 3.2.1, you could add a few lines to your theme’s functions.php file, or you could install a simple plugin. WordPress 3.3 moved things around in the core code, which meant that neither of those methods worked any more. We woke up this morning after upgrading our WordPresses to find the Return of Dreaded Consolas.
After dinking around a bit, I found that the editor div class had been changed. I could change the stylesheet in /wp-includes/css/editor-buttons.css and make it work, but that would mean I’d have to remember to change it again with every subsequent upgrade of WordPress.
Here are two ways to fix it for WordPress 3.3.
Add lines to functions file
If you want to use Justin Tadlock’s method of adding lines to your theme’s function file, use this:
/* Set HTML edit screen font to Verdana*/
add_action( 'admin_head-post.php', 'devpress_fix_html_editor_font' );
add_action( 'admin_head-post-new.php', 'devpress_fix_html_editor_font' );
function devpress_fix_html_editor_font() { ?>
<style type="text/css">#editorcontainer #content, #wp_mce_fullscreen, .wp-editor-area { font-family: Verdana, Arial, sans-serif; }</style>
<?php }
This works well if you are using a custom theme or a child theme. If you put these lines directly into a non-custom theme functions file, remember to add them again whenever the theme is updated.
Add a plugin
In your /wp-content/ folder, create a new folder called /mu-plugins/ . Create a new plain text document with the following code. Name it something like fix-editor.php, and upload into the /wp-content/mu-plugins/ directory.
<?php
/*
Plugin Name: HTML Editor
Plugin URI: http://tech.ipstenu.org/hacks/wordpress-html-editor-font/, http://wpbonbons.com/tech-tips/fix-the-html-editor-font-in-wordpress-3-3/
Description: I don't like the HTML editor Font on Windows (now updated for WordPress 3.3)
Version: 1.1
Author: MA Epstein, with minor revision for 3.3 by Carol Logan Newbill
Author URI: http://ipstenu.org/
*/
function html_editor_admin() {
?>
<style type="text/css">#content #editor, #editorcontainer #content, #editorcontainer textarea#content, #editorcontainer textarea, div#postdivrich.postarea #editorcontainer textarea#content, .wp-editor-area { font: normal 13px/1.5 verdana !important; }</style>
<?php }
add_action('admin_head', 'html_editor_admin');
?>
Your HTML editor area will look like its old self again.