• Skip to primary navigation
  • Skip to main content

joshsushi

  • About
  • Blog
    • Freelancing
    • Marketing
    • WordPress
    • Uncategorized
  • Tools
  • Contact

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.

Updated 2021-01-09 Post Under: Wordpress

Other Posts

  • Why SendFox? Best Entry-level Email Service Provider
  • Apply CSS to WordPress admin
  • Best Website Hosting for Beginners, Freelancers, and Agencies
  • SiteGround Hosting Limitations
  • Replace URL in the PhpMyAdmin Database Using MySQL Scripts
  • Get SSL with a Site on Hostinger for Free
  • Get Unstuck Writing Your Blog Post (My 5-Step Writing Process)
  • Optimize WordPress Images to Make Your Site Faster
  • Change Your WordPress Username in PhpMyAdmin
  • How to Hire Freelance Composer, Arranger, Audio Engineer or Musician

Copyright © 2023 · joshsushi.com