Change WordPress Editor Font Now

If you don’t just like the default font displayed once you are within the WordPress editor, you’ll amendment it. Change your Change WordPress Editor font in the following two ways.

I was employing a YooTheme Warp half dozen model and also the editor font was tough to scan. I required an even bigger, typeface font. moreover, I needed to own the text wrap at the breadth of the content div in my posts thus I might get an inspiration of however the text would look.

Change WordPress Editor font 1

Here’s the way to amendment the editor font and also the breadth of the text wrap in it.

(i) Look in your theme directory ( /wp-content/themes/your-theme ) and see if you have got a file known as editor-style.css. If you have got one, you’ll use that. If you don’t have that file, copy the editor-style.css from /wp-content/themes/twentyeleven.
(ii) Look for the subsequent rules. within the TwentyEleven editor-style.css, they’re on line six and sixteen.

html .mceContentBody {
max-width: 584px;
* {
color: inherit;
font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: inherit;
font-weight: inherit;
line-height: 1.625;
body {
color: #333;
font: 15px "Helvetica Neue", Helvetica, Arial, "Nimbus Sans L", sans-serif;
font-weight: 300;
line-height: 1.625;

(iii) Just change the max-width to edit the width.

  •  To change the font family, amendment the font within the rules on line five and eleven within the code example on top of.
  • Add the subsequent code into your theme’s root functions.php:

Note: Before you add this code, look around your theme’s functions.php file to create positive it’s not already there.

/* add editor-style.css to theme */
function my_theme_add_editor_styles() {
    add_editor_style( 'editor-style.css' );
add_action( 'init', 'my_theme_add_editor_styles' );

As you are using wordpress editor, you may want to change the default font to a new one of your choice. For Change WordPress Editor you can follow this simple and short function.

Change WordPress Editor

Change WordPress Editor font 2

Nothing complicated. Simply open your functions.php file and paste the following code:

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 { font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif; }</style>
<?php }

Once you saved the file, the editor font is changed to Georgia. Of course, feel free to modify the code to display your favorite font.

If you like this article share it with your friends.

Roy Jemee is a professional Blogger. Apart of blogging he likes to play with mathematics. He knows Blogging, Wordpress, PHP, javascript , SEO and some other.