2

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.

4

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.

screenshot

Hope this helps. :)

| improve this answer | |
  • Thanks, but I meant the text size inside the editor itself, not the published text. My bad, I should have been clearer. I've edited my question. – Muhammad Dec 9 '18 at 17:43
  • Oh haha ok sorry. Glad you have it all figured out now! – Glenn Greening Dec 13 '18 at 2:36
4

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:

Gutenberg editor showing custom font sizes for a paragraph in a dropdown menu

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.

| improve this answer | |
  • Is there a way to make it use em sizes instead of pixels? – authentictech Oct 7 at 23:17
1

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:

enter image description here

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.

| improve this answer | |
1

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 */
 }
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.