As a developer, I prefer writing my posts in HTML editor. It is strange, but TinyMCE HTML editor doesn’t use monospace fonts. Here i will show you how to insert our own CSS styles in WordPress using theme functions file.

To insert our custom css, all we need is a hook, and this hook is admin_print_styles. WordPress call this hook before the start of Admin CSS outputs. So we will output our CSS using it. After the hook is called, all we need to do is, output our CSS wrapped with <style> tags. Here is the full working code:

function change_editor_font(){
		echo "<style type='text/css'> 
#editorcontainer textarea#content { 
  background: #efefef; /* A darker background is better for eyes ;) */
  font-family: Monaco, Consolas, "Andale Mono", "Dejavu Sans Mono", monospace; /* The best monospace font-family stack, i think */
  font-size:14px; 
  text-shadow:0px 0px 0px #444; /* Using it because i can */
  color:#444; } 
</style>";
} add_action("admin_print_styles", "change_editor_font");

Just copy & paste this code to your functions file, and enjoy sweetness of monospace fonts.

As you can see I used double ids for the rule (#ecitorcontainer #content). This way, i am making sure my CSS rules won’t be overwritten. You can read more about css style precedence here.

Using this template you create your own CSS modifications. But please note that this hook will work for admin pages only. For wordpress frontend css inserts, you will need to use wp_print_styles hook.

For other functions file hacks here is the list: