Why did the WordPress 5.9 update make my theme fonts change size?

Have you just run the WordPress 5.9 update and seen your site change how it looks? I ran through the update today and was shocked to see that any paragraph blocks that I have previously set to large were no longer 20px as per my theme options but now showing at 36px

When I investigated what was causing the text to show at 36px, I could see this in the CSS

font-size: var(--wp--preset--font-size--large) !important;

This is the WordPress 5.9 default size for large – and is far too large for my theme.

My current theme settings that I have been using for a year or more use add_theme_support(), as per below were being overridden.

add_theme_support('editor-font-sizes', array(
    array(
        'name' => esc_attr__( 'Small', 'genesis-sample' ),
        'size' => 12,
        'slug' => 'small'
    ),
    array(
        'name' => esc_attr__( 'Normal', 'genesis-sample' ),
        'size' => 18,
        'slug' => 'normal'
    ),
    array(
        'name' => esc_attr__( 'Large', 'genesis-sample' ),
        'size' => 20,
        'slug' => 'large'
    ),
    array(
        'name' => esc_attr__( 'Larger', 'genesis-sample' ),
        'size' => 24,
        'slug' => 'larger'
    )
) );

Digging into the WordPress 5.9 update notes, I could see that the Full Site Editing means that theme.json is now supporting theme updates. Perhaps if I added a theme.json file to my existing theme, I could reassert the font sizes I wanted?

Basic theme.json to amend font-sizes only

Please note, I added layout settings too, because, without them, the editor was left-aligned to the screen edge and full width

{
    "$schema": "https://schemas.wp.org/wp/5.9/theme.json",
        "version":1,
	    "settings": {
            "layout": {
                "contentSize": "820px",
                "wideSize": "1000px"
              },
            "typography": {
                "fontSizes": [
                    {
                        "slug": "extra-small",
                        "size": "10px",
                        "name": "Extra small"
                    },
                    {
                        "slug": "small",
                        "size": "12px",
                        "name": "Small"
                    },
                    {
                        "slug": "normal",
                        "size": "18px",
                        "name": "Normal"
                    },
                    {
                        "slug": "medium",
                        "size": "20px",
                        "name": "Medium"
                    },
                    {
                        "slug": "large",
                        "size": "20px",
                        "name": "Large"
                    },
                    {
                        "slug": "larger",
                        "size": "24px",
                        "name": "Larger"
                    },
                    {
                        "slug": "extra-large",
                        "size": "40px",
                        "name": "Extra large"
                    }
                ]
            }
	}
}

• The slug is used in the generated CSS class name.
• The size property can be any CSS that is valid for font sizes, using for example em, rem or px units.
• The Name property is the visible name in the editor.

Once I pressed saved and refreshed my page, the font sizes had returned to their original size

More about the theme.json file

The theme.json file which consolidates the various block editor APIs into a single point in the root of the theme directory.

The theme.json specification lays out the current specification, but as of Jan 31st is still referencing WordPress 5.8, so I am expecting updates

If you would like any help with correcting theme overrides that have appeared after upgrading to WordPress 5.9, please contact me and I would be happy to help