How to Change the Font Inside Gutenberg Editor

You’ve decided on the font for your WordPress site.

But what if you wanted to display a different font when writing in a Gutenberg block editor?

Use this code snippet.

Put this code snippet in the functions.php of your child theme.

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style( 'your-handle-here', get_stylesheet_directory_uri() . "/editor-style.css", false, '1.0', 'all' );
} );

Now you can style the Gutenberg block editor.

As you can see in the code above, create the style sheet file with the same name in the root folder of your child theme.

In this case, it’s editor-style.css.

Type in whatever you want in the style sheet you just created.

.editor-styles-wrapper {
  font-family: "Times New Roman", serif;
}

I just made the font Times New Roman. When typing, I prefer a serif font.

The block editor is wrapped with the class .editor-styles-wrapper.

But make sure to check with your browser’s inspector to find the exact class name of the elements you wish to style, as there could be some variants depending on the theme.

Add !important if necessary.