8

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

Improve this question
2
  • So your theme.json file is indeed being loaded correctly? (Did you put it in wp-content/themes/your-theme/theme.json?) And are you saying the layout option works properly, but not the fontFamilies option? Have you tried clearing your caches? Have you double-checked that the Google font is also being loaded correctly?
    – Sally CJ
    Commented Aug 13, 2021 at 17:59
  • Yes, that is exactly where the theme.json sits. The layout options are working and I have also been able to add color options with no problems, it's only the fontFamily option that doesn't seem to work. I checked the source code and the Google font is being loaded. I have also cleared the cache.
    – KKBSE2016
    Commented Aug 16, 2021 at 7:12

2 Answers 2

Reset to default
13

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.

Improve this answer
4
  • 1
    Thanks for your response. I have tried implementing this on my theme.json file but its now working in the editor. When inspecting I actually can't see the --wp--preset--font-family--ubuntu-sansserif being loaded at all. I can see my colors and font sizes but no fontFamilies.
    – KKBSE2016
    Commented Aug 19, 2021 at 10:26
  • 2
    Additionally, I have managed to set the font family in a custom CSS variable using the method describe in the dev docs but again when I try to set the styles > typography > fontFamily property to that custom variable it isn't loading. I'm starting to think that the fontFamily property has an issue.
    – KKBSE2016
    Commented Aug 19, 2021 at 10:40
  • It's good to understand that --wp--preset--font-family is a prefix to add with the slug of the font. For instance if I would put a font family Montserrat with montserrat slug, the complete variable would be "--wp--preset--font-family--montserrat". It's also important to say that theme.json has an "elements" object which I could define each element's typography attribute like h1, h2, link, etc.
    – samu101108
    Commented Oct 28, 2022 at 18:04
  • @KKBSE2016 the example above had some typos in there, that would render it invalid json. i now removed them, not sure when stackexchange will approve my edit. but for now: the last item inside an array/object should not have a trailing comma. so this could be the reason for not working on your end. i implemented it in my current project and it works fine.
    – honk31
    Commented Jan 30, 2023 at 14:32
1

At this time, typography.fontFamilies is only available in the Gutenberg plugin. The plugin must be installed for this setting to take effect. See the comparison toggle at https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#settings

Improve this answer

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.