Google Fonts in Gutenberg Editor  Styles

If you’re having trouble replacing the font-family for the block editor in WordPress, this undocumented alternative approach should provide a frustration free alternative. The standard approach that uses the add_editor_style function won’t support the loading of external assets in CSS with the @import rule.

Alternative Approach

Using Google Fonts in the WordPress editor styles doesn’t work when using add_editor_style() to enqueue and editor stylesheet. To get around this, we can enqueue styles directly using the wp_enqueue_style() method inside a enqueue_block_editor_assets action hook. This approach will allow you to use @import inside your editor styles, making it possible to load external stylesheets for Google Fonts inside the Gutenberg editor.

PHP

Add the following to your theme’s functions.php file to have WordPress load an editor.css file that modifies the built-in Gutenberg editor CSS. In this example you’ll want to replace the value of the $css variable with the relative path to your theme’s editor.css file.

/*
 * Gutenberg Editor CSS
 *
 * Load a stylesheet for customizing the Gutenberg editor
 * including support for Google Fonts and @import rules.
 */
function gutenberg_editor_css()
{
  $css = '/dist/editor.css';
  $version = filemtime(get_stylesheet_directory().$css);
  wp_enqueue_style('editor-css', get_stylesheet_directory_uri().$css, [], $version);
}
add_action('enqueue_block_editor_assets', 'gutenberg_editor_css');

SCSS

The following SCSS will compile to CSS, and is what I typically use to pre-process all styles in the themes I built and maintain. If you’re not familiar with this syntax you can copy/paste it into the Sassmeister online compiler tool to convert it to CSS.

/**
 * Gutenberg Editor
 */
@import "https://fonts.googleapis.com/css2?family=Poppins:ital,[email protected],300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=auto";

.editor-styles-wrapper {
  &,
  * {
    font-family: "Poppins", sans-serif;
  }
}

That’s it, you should now see the Poppins Google Font used for every element inside of the WordPress Gutenberg editor. You can swap out Poppins with any other Google Font that you’d like, just adjust the @import rule above.

Word of Caution

Common approaches involving add_editor_style and @import won’t work, because WordPress doesn’t allow @import of editor styles. If you enqueue the editor CSS yourself though, you bypass some of the automatic/mystical processing of the CSS and are able to have CSS function the exact way you expect. Be cautious though, this approach gives you complete control of the CSS for the Gutenberg editor. If you’re not comfortable with advanced SCSS/CSS then you may end up breaking core functionality of the Gutenberg editor. We’re effectively removing guardrails put in place by the Automattic Gutenberg development team.

Advanced Gutenberg Customization

There are many ways to customize the Gutenberg editor to suite the needs of a specific website or theme. Some are handled with a PHP configuration, and others with JavaScript. It’s always best to use these approaches when possible before changing the Gutenberg editor UI with CSS. Some of these configurations include:

• Alignment options
• Global block font sizes
• Global theme color options
• Block style options

Bill Erickson does an excellent job outlining these customization approaches. I highly recommend reading his Gutenberg Theme Development series of articles on the subject.

To go straight to the source, check out the Block Editor Handbook which serves as the official documentation for the Gutenberg editor. It includes details on all of the configuration options available to developers.