Adding fonts to the block editor

As we use more and more blocks on our WordPress websites, it is important that the editor match what we see on the front. In this tutorial, we will be adding fonts to the block editor.

Heads up, this post is a little bit technical if you are a beginner.

I will include an example of how we can use a customizer font option and use that font in the block editor. You can then expand on this basic idea to make it work with your theme or plugin.

This assumes that:

• Your theme or plugin has a font option using theme mods.
• You are already using this font on the front of the website (This guide will not cover how to do both).

How to add custom fonts with inline styles

We will be using:

• get_theme_mod
• enqueue_block_editor_assets
• An editor style sheet
• Inline styles

First, we need to check if our theme or plugin is already using the enqueue_block_editor_assets action.

If not, we need to create a new blank .CSS file that we will enqueue. In the example I have named my .CSS file editor-style.css:

function prefix_block_styles() {
wp_enqueue_style( 'prefix-editor-styles', get_theme_file_uri( 'css/editor-style.css' ) );
}
add_action( 'enqueue_block_editor_assets', 'prefix_block_styles' );

Now, if we only had one font to add, and not a customizer option where the user selects fonts, we could enqueue the font like this:

function prefix_block_styles() {
wp_enqueue_style( 'prefix-editor-font', '//fonts.googleapis.com/css?family=Poppins:400,700&display=swap');
}
add_action( 'enqueue_block_editor_assets', 'prefix_block_styles' );

But we want our users to be able to select from several different font combinations. That means that we also need to add our custom font names to the CSS.

The two problems we need to solve are:

• Applying our dynamic theme mods to the editor style sheet.
• Overriding the default font that is used in the editor.

The specificity of the Gutenberg style sheet has improved a lot since the early releases. If you are curious about this process and the discussions around CSS specificity, see https://github.com/WordPress/gutenberg/pull/14407

But we still need to override the following:

.edit-post-visual-editor.editor-styles-wrapper,
.editor-post-title__block .editor-post-title__input

And if we have different font options for body text and headings, we also want to override the headings:

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6,

Our example code will look like this:

function prefix_block_styles() {
wp_enqueue_style( 'prefix-editor-styles', get_theme_file_uri( 'css/editor-style.css' ) );

$prefix_heading_font = get_theme_mod( 'heading_font', 'Lora' );

$prefix_body_font = get_theme_mod( 'body_font', 
'Roboto' );

wp_enqueue_style( 'prefix-editor-font', '//fonts.googleapis.com/css?family=' . $prefix_heading_font . ':400,700|' . $prefix_body_font . ':400,700&display=swap');

$prefix_custom_css = '
.edit-post-visual-editor.editor-styles-wrapper { font-family:' . 
esc_html( $prefix_body_font ) . ' } 

.editor-post-title__block .editor-post-title__input,
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 { font-family:' .
esc_html( $prefix_heading_font ) . ' } 
';

wp_add_inline_style( 'prefix-editor-styles', $prefix_custom_css );
}
add_action( 'enqueue_block_editor_assets', 'prefix_block_styles' );

First we are adding our empty stylesheet. This is only used so that we can apply our custom css inline later.

Then we are assigning our two theme mods (body and title font family) to variables. This is only for ease of use and to make it easier to read the code.

We use the variables to fetch the correct fonts from Google fonts. I also included two font weights, 400 and 700.

Then we add a third variable, $prefix_custom_css, that holds our custom inline CSS.

Finally we attach the CSS to our style sheet using wp_add_inline_style together with the handle for the style sheet.

Remember to update your prefix :).

---

Final words

You will probably use a more advanced way of fetching the selected fonts. But for the purpose of this tutorial, I have used wp_enqueue_style directly.

It is recommended to also include some system fonts in the CSS as a fallback.

This method for adding fonts to the block editor is fiddly and not super clean. But it works until the global styles are available in WordPress core.