Gutenberg – changing font size options

You can either give your users a custom set of font sizes to choose from, or completely block them from changing the font size if you’d like to allow your theme to control the font sizes. Here’s how:

Remove all font size options

You can remove the text box where users can enter custom font sizes entirely. Unfortunately, you can’t cleanly remove the font size dropdown. Instead, you can present “normal” as the only option in that dropdown. I’m hopeful that future updates to the Block Editor will make it possible to more cleanly remove the font size dropdown, similar to how we can remove custom colors entirely.

add_action('after_setup_theme', 'gute_remove_font_size_options');
function gute_remove_font_size_options() {
	// removes a text box where users can enter custom pixel sizes
	add_theme_support('disable-custom-font-sizes');
	// forces the dropdown for font sizes to only contain "normal"
	add_theme_support('editor-font-sizes', array(
		array(
			'name' => 'Normal',
			'size' => 16,
			'slug' => 'normal'
		)
	) );
}

Set custom font size options

If you’d like to allow a specific set of font sizes, you can still remove the text box that lets them enter pixel sizes, and replace the WP Core set of font sizes with your own.

add_action('after_setup_theme', 'gute_remove_font_size_options');
function gute_remove_font_size_options() {
	// removes a text box where users can enter custom pixel sizes
	add_theme_support('disable-custom-font-sizes');
	// forces the dropdown for font sizes to only contain "normal"
	add_theme_support('editor-font-sizes', array(
		array(
			'name' => 'Mini',
			'size' => 6,
			'slug' => 'mini'
		)
		array(
			'name' => 'Normal',
			'size' => 16,
			'slug' => 'normal'
		)
		array(
			'name' => 'Maxi',
			'size' => 42,
			'slug' => 'maxi'
		)
	) );
}

Just pass each desired font size as an array, with a name, pixel size, and slug.

Leave a Reply

Your email address will not be published. Required fields are marked *