Add Custom Font Sizes to the Editor
Adds your own named font sizes, such as "Lead" or "Display", to the font size picker in the block editor alongside the theme's sizes.
Opens WPIDE on
Code
// Font sizes to add: slug, name and CSS size.
$wpide_font_sizes = array(
array( 'slug' => 'lead', 'name' => 'Lead', 'size' => '1.25rem' ),
array( 'slug' => 'display', 'name' => 'Display', 'size' => 'clamp(2.5rem, 5vw, 4rem)' ),
);
add_filter( 'wp_theme_json_data_theme', function ( $theme_json ) use ( $wpide_font_sizes ) {
$data = $theme_json->get_data();
$sizes = isset( $data['settings']['typography']['fontSizes'] ) && is_array( $data['settings']['typography']['fontSizes'] ) ? $data['settings']['typography']['fontSizes'] : array();
$sizes = isset( $sizes['theme'] ) && is_array( $sizes['theme'] ) ? $sizes['theme'] : $sizes;
$by_slug = array();
foreach ( array_merge( $sizes, $wpide_font_sizes ) as $size ) {
if ( isset( $size['slug'], $size['size'] ) ) {
$by_slug[ $size['slug'] ] = $size;
}
}
return $theme_json->update_with( array(
'version' => 3,
'settings' => array(
'typography' => array(
'fontSizes' => array_values( $by_slug ),
),
),
) );
} );Notes
Sizes accept any CSS length, including clamp() for fluid type. A slug the theme already uses replaces the theme size.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.