Setting default font family with theme.json

I had the same problem and I find out how to solve it:

For each “fontFamily” inside “fontFamilies” array, you get a custom variable.
From your example You can use both variables on your stylesheet or in theme.json:

--wp--preset--font-family--helvetica-arial
--wp--preset--font-family--ubuntu-sansserif

And then you call the font like this:

{
    "version":1,
    "settings": {
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif",
                    "slug": "helvetica-arial",
                    "name": "Helvetica or Arial"
                },
                {
                    "fontFamily": "\"Ubuntu\", sans-serif",
                    "slug": "ubuntu-sansserif",
                    "name": "Ubuntu",
                    "google": "family=Ubuntu:wght@300;400;500;700&display=swap",

                }
            ]
        },
        "layout": {
            "contentSize": "1600px",
            "wideSize": "1600px"
        }
    },
    "styles": {
        "typography": {
            "fontFamily": "var(--wp--preset--font-family--ubuntu-sansserif)",
        }
    }
}

Sometimes you need to activate / deactivate your theme.

Leave a Comment