10

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? 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. Commented Aug 16, 2021 at 7:12

2 Answers 2

Reset to default
15

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. 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. Commented Aug 19, 2021 at 10:40
  • 1
    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. 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. 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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.