Setting default font family with theme.json

I’ve searched online and have not been able to find any answers to this one. I am in the middle of developing a new website and have started trying to work with the new theme.json feature in WordPress 5.8.

I’ve had no problems setting the layout width and defining a color pallette, however, when it then comes to setting a custom font family the editor doesn’t seem to pick this up.

I have enqueued the custom Google font:

function prefix_block_styles() {
    wp_enqueue_style( 'prefix-editor-font', '//fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');
}
    
add_action( 'enqueue_block_editor_assets', 'prefix_block_styles' );

And then I have this as my current theme.json:

{
    "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"
                }
            ]
        },
        "layout": {
            "contentSize": "1600px",
            "wideSize": "1600px"
        }
    }
}

When I then refresh the editor, it still loads in serif.

Does anyone know what I am doing wrong here?

Thanks

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.