How to change text size of Gutenberg editor

Question

Is there a setting in WordPress Gutenberg editor to change the font size of the text we type while writing posts? I mean the text size inside the editor itself, not the published text that blog visitors view.

Answer 1

If you came here, like me, looking for how to adjust the available text size options within Gutenberg, you can add this code to your theme's functions.php file (you can add as many options as you like):

add_theme_support(
    'editor-font-sizes', 
    array(
        array(
            'name'      => __( 'Normal', 'your-theme-text-domain' ),
            'shortName' => __( 'N', 'your-theme-text-domain' ),
            'size'      => 14,
            'slug'      => 'normal'
        ),
        array(
            'name'      => __( 'Medium', 'your-theme-text-domain' ),
            'shortName' => __( 'M', 'your-theme-text-domain' ),
            'size'      => 16,
            'slug'      => 'medium'
        )
    )
);

This gives the following result within the Gutenberg editor:

You can add add_theme_support( 'disable-custom-font-sizes' ); to your functions.php to remove the numerical input, although the "Custom" option will still be visible in the dropdown.

Answer 2

Just click on the settings/cog icon on the right hand side when you are editing paragraph. Then choose Block. You should then see the option to edit font size. You can choose from dropdown menu or type the font size you want.

Hope this helps. :)

Answer 3

When we change the paragraph font size in Gutenberg via the block text settings, it will be added inline like:

<p style="font-size:18px">Lorem Ipsum</p>

If we are frequently changing the font-size (or other formatting) like that, it's easy to imagine the state of the content in few years, where most of the content formatting is hard coded.

It could e.g. override the formatting from a new theme if we decide to switch to a new theme later on.

So I would suggest using it with care.

An alternative could be to target the formatting via unobtrusive CSS.

If that's not possible one could then consider adding custom target CSS classes via the Advanced Gutenberg block setting:

that will generate a class attribute like:

<p class="some__custom--class">Lorem Ipsum</p>

where we define the CSS class in the corresponding stylesheet.

Answer 4

I had same question how to change heading font size in Editor, just found myself:

PS: This is a generic solution for any WP customization:

1. While in editor, using e.g. Firefox "inspect element", select the element(any text or heading) you want to change;
2. In the middle column, it will point to the setting css file, e.g. editor-style.css, it gives also the line number;
3. Go [SIDE MENU]Appearance => Theme Editor => select the css setting file, change the font size, and update the css setting file.
4. That's it!

For your case, it is to change editor-blocks.css:

.edit-post-visual-editor .editor-block-list__block,
.edit-post-visual-editor .editor-block-list__block p,
.editor-default-block-appender textarea.editor-default-block-appender__content {
                  font-size: 16px;   /* change to your font size */
 }