How to Add Custom Editor Styles to WordPress

By default, the fonts in the WordPress editor are too small for me. So I created an editor css stylesheet to change it. Here’s how.

1. First, you need to tell wordpress that you want to use a custom stylehsheet for the editor. There are two ways to do this. The easiest way is to install the TinyMCE Advanced plugin. Once you install it, there is a setting for using a custom editor stylesheet.
   Select the Import editor-style.css option.
   
   The second way to tell WordPress you want to use a custom editor stylesheet is to add the following code to your theme’s functions.php file:

   add_editor_style('editor-style.css');

2. Create a file called editor-style.css and put it in your theme folder;
   eg /wp-content/themes/your-theme/editor-style.css
3. Add the following css rules to the editor-style.css file to change the default editor font:

   * {
   color: inherit;
   font: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
   font-style: inherit;
   font-weight: inherit;
   line-height: 1.625;
   }
   body {
   color: #333;
   font: 14px "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
   font-weight: 300;
   line-height: 1.625;
   }

4. If you want different fonts or font size, change the two font rules.
5. You can also add css styles to the WordPress