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

How to Add Custom Fonts to the Advanced Editor Tools Font Family List

20 threads Sep 9, 2025 Plugin → Advanced editor tools

Content

Many WordPress users who rely on the Advanced Editor Tools plugin (formerly TinyMCE Advanced) want to use custom or Google Fonts in the classic editor. A common point of confusion is that the plugin's Font Family dropdown does not automatically show fonts added to your theme. This article explains why this happens and provides the most common methods to add your fonts to the list.

Why Your Custom Fonts Don't Appear Automatically

The font list in the Advanced Editor Tools dropdown is a core setting of the TinyMCE editor itself, separate from your theme's stylesheet. By default, it only shows a standard set of 'web-safe' fonts that are likely to be available on a visitor's computer. As noted in the support threads, the Advanced Editor Tools team has indicated that automatically pulling in fonts from a theme is complex and not currently a feature of the plugin. Therefore, to use custom fonts, you must manually configure the editor's font list and ensure the fonts are properly enqueued on your site.

Method 1: Use a Helper Plugin (Recommended for Non-Coders)

The simplest way to modify the font list is by using a dedicated configuration plugin. The 'Advanced TinyMCE Configuration' plugin is frequently recommended in support forums for this purpose.

  1. Install and activate the Advanced TinyMCE Configuration plugin.
  2. Go to Settings > Advanced TinyMCE Config in your WordPress dashboard.
  3. Find the setting for font_formats.
  4. Enter your custom font list in the required format. The list must be a single line, with each font family defined by its name and a fallback, separated by a semicolon. For example: 
    Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; My Custom Font=my-custom-font, sans-serif;
  5. Save the changes.

Important: This method only adds the font to the dropdown menu. You must still load the font files on your website using your theme's functions.php file or a plugin like 'Easy Google Fonts'.

Method 2: Add Code to Your Theme's functions.php File

For users comfortable with code, you can use the tiny_mce_before_init filter hook to directly modify the editor's settings.

  1. Add the following code to your child theme's functions.php file to avoid losing changes on theme updates.
  2. Replace the example font string with your own list.
add_filter( 'tiny_mce_before_init', 'my_custom_fonts' );
function my_custom_fonts( $init_array ) {
    // Define your custom font list
    $custom_fonts = 'My Custom Font=my-custom-font, sans-serif; Another Font=another-font, serif;';
    
    // Apply it to the 'font_formats' setting
    $init_array['font_formats'] = $custom_fonts . ';' . $init_array['font_formats'];
    
    return $init_array;
}

Again, this code only manages the list in the editor. You are responsible for ensuring the font is properly enqueued on both the front end of your site and in the editor using an editor-style.css file.

Important Considerations and Limitations

  • Font Availability: Simply adding a font to the dropdown does not make it appear for your site visitors. The font files must be hosted and loaded via CSS on your website.
  • Web-Safe Fonts: The default list is limited for a reason. If you use a obscure custom font, visitors who haven't downloaded it will not see it unless you have implemented web font loading correctly.
  • Future Development: Based on community feedback, the Advanced Editor Tools team has mentioned the possibility of creating a separate plugin for more robust font management in the future, but this is not currently available.

By following these methods, you can integrate your brand's typography directly into the WordPress editing experience. Always remember to test your changes thoroughly.

Related Support Threads Support