This snippet allows you to define custom font sizes in the Gutenberg block editor. The selected sizes will appear in the Typography settings for text-based blocks, helping maintain consistent typography across your website.
Steps
- Open your theme’s
functions.phpfile or a custom plugin. - Add the code below.
- Save the file and clear any caches.
- Open the Gutenberg editor and check the Font Size options.
add_theme_support(
'editor-font-sizes',
array(
array(
'name' => __( 'Small', 'textdomain' ),
'size' => 14,
'slug' => 'small'
),
array(
'name' => __( 'Medium', 'textdomain' ),
'size' => 18,
'slug' => 'medium'
),
array(
'name' => __( 'Large', 'textdomain' ),
'size' => 24,
'slug' => 'large'
),
array(
'name' => __( 'Extra Large', 'textdomain' ),
'size' => 36,
'slug' => 'extra-large'
),
)
);
