How to Change WordPress Editor Font

If you don’t like the default font displayed when you are in the WordPress editor, you can change it.

I was using a YooTheme Warp 6 template and the editor font was difficult to read. I needed a bigger, sans serif font. Furthermore, I wanted to have the text wrap at the width of the content div in my posts so I could get an idea of how the text would look. 

Here’s how to change the editor font and the width of the text wrap in it.

1. Look in your theme directory ( /wp-content/themes/your-theme ) and see if you have a file called editor-style.css. If you have one, you can use that. If you don’t have that file, copy the editor-style.css from /wp-content/themes/twentyeleven.
2. Look for the following rules. In the TwentyEleven editor-style.css, they are on line 6 and 16.

   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;
   }

3. To edit the width, change the max-width number in the html .mceContentBody rule.
   
   Pages: Page 1 Page 2