block editor - Setting font sizes in theme.json

Just diving into setting some styles with theme.json. I'm having trouble getting my preferred font sizes to show up in the editor. Here's the code:

{
    "version": 2,
    "settings": {
        "typography": {
            "fontSizes": [
                {
                    "slug": "small",
                    "size": ".875em",
                    "name": "Small"
                },
                {
                    "slug": "medium",
                    "size": "1em",
                    "name": "Medium"
                },
                {
                    "slug": "large",
                    "size": "1.125em",
                    "name": "Large"
                },
                {
                    "slug": "x-large",
                    "size:": "1.25em",
                    "name": "X Large"
                }
            ]
        }
    }
}

But the block editor panel shows this:

I'm confused about why it shows both "Default" and "X Large" for the final value, and why the number disappears rather than showing as selected (the other three sizes will be highlighted appropriately when selected).

Additionally, rather than applying the X Large font size, it applies the Medium font size (presumably the "default", which I haven't set elsewhere in theme.json to my knowledge).

Just diving into setting some styles with theme.json. I'm having trouble getting my preferred font sizes to show up in the editor. Here's the code:

{
    "version": 2,
    "settings": {
        "typography": {
            "fontSizes": [
                {
                    "slug": "small",
                    "size": ".875em",
                    "name": "Small"
                },
                {
                    "slug": "medium",
                    "size": "1em",
                    "name": "Medium"
                },
                {
                    "slug": "large",
                    "size": "1.125em",
                    "name": "Large"
                },
                {
                    "slug": "x-large",
                    "size:": "1.25em",
                    "name": "X Large"
                }
            ]
        }
    }
}

But the block editor panel shows this:

I'm confused about why it shows both "Default" and "X Large" for the final value, and why the number disappears rather than showing as selected (the other three sizes will be highlighted appropriately when selected).

Additionally, rather than applying the X Large font size, it applies the Medium font size (presumably the "default", which I haven't set elsewhere in theme.json to my knowledge).

• block-editor
• fonts
• theme.json

Share Improve this question asked Jul 16, 2022 at 10:04 nickfindleynickfindley 18366 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Your syntax for is slightly off; there's an extra semi-colon before the " in size; instead use:

    "version": 2,
    "settings": {
        "typography": {
            "fontSizes": [
                {
                    "slug": "x-large",
                    "size": "1.25em",
                    "name": "X Large"
                }
            ]
        }
    }
}