# 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.

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: typography, font-sizes, editor
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/add-custom-font-sizes/

## Code

```php
// 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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Add Custom Font Sizes to the Editor" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/