How to change text size of Gutenberg editor

by

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.

Leave a Comment