Select Page

Photo: Michael Himbeault, Flickr

This post is more for the developers among you, or people like me, who have little to no PHP experience, but maintain a WordPress website.

To improve your editor experience in WordPress and make the editing text more readable, add the following code to your theme function.php page:

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:'DejaVuSansMono',Consolas,courier,monospace;font-size:16px;line-height:1.8em !important;
        }
    </style>
<?php }

Note that this example uses an Open Source font called DejaVu Sans Mono, which you can download for free.