BugWP logo BugWP
Back to Community
Home / Community / Plugin → Advanced editor tools

How to Change the Default Font and Size in the WordPress Editor (Advanced Editor Tools)

33 threads Sep 16, 2025 Plugin → Advanced editor tools

Content

Many WordPress users install the Advanced Editor Tools (formerly TinyMCE Advanced) plugin to gain more control over their editing experience. A frequent request is to change the default font family and size that appears in the visual editor. This article explains why this happens and provides the most effective methods to customize these defaults.

Why Can't I Change the Defaults in the Plugin Settings?

The Advanced Editor Tools plugin enhances the TinyMCE editor by adding buttons like 'Font Family' and 'Font Size' to the toolbar. However, the plugin itself does not have a setting to change the base or default font that loads when you start editing. This default styling is primarily controlled by your active theme.

Common Solutions for Changing the Default Editor Font and Size

Method 1: Use Your Theme's editor-style.css File

The standard way to style the visual editor is through a file named editor-style.css in your theme's folder. This file is specifically designed to make the editor look more like your live website.

How to do it:

  1. Access your website's files via FTP or your hosting provider's file manager.
  2. Navigate to /wp-content/themes/your-theme-name/.
  3. Look for a file named editor-style.css. If it doesn't exist, you can create it.
  4. Add the following CSS code to the file, modifying the values to your preference: 
    body#tinymce.wp-editor {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
}
  5. Save the file and clear your site's cache if you use a caching plugin.

Important Note: Any changes made directly to your theme's files will be overwritten the next time you update the theme. To make this change permanent, you must use a child theme.

Method 2: Use a Custom Function (Advanced)

For more control, you can use the tiny_mce_before_init filter hook in WordPress to modify the TinyMCE initialization settings. This is often done by adding code to your child theme's functions.php file.

How to do it:

  1. In your child theme, open the functions.php file.
  2. Add the following code snippet at the end: 
    function my_custom_editor_font( $settings ) {
    $settings['content_style'] = '.mce-content-body { font-family: Arial, sans-serif; font-size: 16px; }';
    return $settings;
}
add_filter( 'tiny_mce_before_init', 'my_custom_editor_font' );
  3. Save the file. The editor should now reflect your new default styles.

Method 3: Use a Supplementary Plugin

If editing code is not for you, a supplementary plugin like Advanced TinyMCE Configuration can provide a user interface to adjust these advanced settings. After installing this plugin, you can often find a field to add custom CSS for the editor content under its settings.

Troubleshooting Common Issues

  • Font size dropdown is missing: This is a common issue after updating the plugin. Go to Settings > Advanced Editor Tools and drag the 'Font Size' button from the 'Unused Buttons' section back onto your preferred toolbar row.
  • Changes don't appear: Ensure you are using a child theme to prevent updates from erasing your work. Also, try holding the Shift key and refreshing your browser to bypass cache.
  • Editor font doesn't match my theme: The editor is a separate interface. Using the editor-style.css method is the best way to make it mimic your theme's front-end styling.

By following these methods, you can successfully change the default font and size in your WordPress editor to create a more comfortable and consistent writing environment.

Related Support Threads Support