If you are using a Classic WordPress theme it’s possible that the Gutenberg editor looks like sh*t because it’s using default tiny serif fonts that can be difficult to read and write with. This simple guide will show you how you can fix this by customizing the default Gutenberg typography!
Method 1: Using Inline CSS to modify the Gutenberg Typography
The easiest way to modify the Gutenberg font and typography is by adding an inline <style> tag to the Gutenberg editor with a little custom CSS. In order to load custom styles in the Gutenberg editor you can hook into the enqueue_block_editor_assets action hook then use the wp_add_inline_style() function to insert your custom CSS.
/**
* Hooks into "enqueue_block_editor_assets" to add inline styles to the Gutenberg Editor.
*/
function wpexplorer_add_block_editor_css() {
wp_register_style( 'wpexplorer-editor-styles', false );
$css = '
.editor-styles-wrapper {
font-size: 1.125rem;
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
line-height: 1.5;
color: #555555;
}
';
wp_add_inline_style( 'wpexplorer-editor-styles', $css );
wp_enqueue_style( 'wpexplorer-editor-styles' );
}
add_action( 'enqueue_block_editor_assets', 'wpexplorer_add_block_editor_css' );You may have noticed we are using the wp_register_style() function even though we aren’t loading any custom scripts. We do this simply to register a “dummy” script that we can use for the wp_add_inline_style() function. This isn’t really a “hack” as WordPress uses it themselves in core and it’s the recommended way to add inline styles to your site without an actual script dependency.
Method 2: Using a theme.json File
The second method for fixing the Gutenberg typography is to add a theme.json file to your WordPress theme. If you are working with a 3rd party theme, then this can be done via your child theme.
The theme.json file sends information to Gutenberg about your theme including your site styles (colors, paddings, margins, fonts and more). This file is intended primarily for block themes but it’s perfectly fine to use in classic theme’s as well.
This method is not as easy because you will need to create a custom file and have a little experience with json data. But it’s recommended if you wanted to make more modifications to the editor and if you wanted those edits to potentially take place on the live site as well (if you target specific blocks).
You can start by creating an empty theme.json file in your theme or child theme.
Sample theme.json File
This is a very basic example of what your theme.json file may look like:
{
"version": 3,
"settings": {
"layout": {
"contentSize": "780px",
"wideSize": "1000px"
},
},
"styles": {
"typography": {
"fontFamily": -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif,
"fontSize": "1.125rem",
"lineHeight": "1.5"
},
"color": {
"background": "#FFFFFF",
"text": "#555555"
}
}
}Feel free to copy the code and add it to your theme.json file and then modify it to fit your needs. In this example I’ve also added the contentSize and wideSize properties to show you how you can easily modify the Gutenberg width as well.
And of course if you are working with a theme.json file there are TONS of settings you can modify and you can even modify the design of any blocks. So be sure to read up on global settings and styles on the official WordPress.org docs.
Conclusion
Hopefully this guide has helped you fix the fonts in Gutenberg on your site!
I personally use classic themes on a lot of sites, which I generally prefer over block themes. But I do like using the Gutenberg editor for writing blog posts. Making sure the fonts look good in block editor makes writing posts more pleasant. And if I can match my fonts in Gutenberg to those on the live site, even better!
If you have any questions or issues, let me know in the comments below.
