2

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:

enter image description here

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

1 Answer 1

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"
                }
            ]
        }
    }
} 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.