fonts - Add fontFamily object to theme.json

admin管理员组

文章数量:1129123

I have an FSE-related question

• I'm trying to add a font to the 2023 theme but it's not showing in Gutenberg editor.
• In theme.json, in the "settings.typography.fontFamilies" section, I added the following fontFamily definition:

{
    "fontFamily": "Sarabun, sans-serif",
    "name": "Sarabun",
    "slug": "sarabun"
},

I realize that this doesn't import the actual font definition files (...woff2), but I think it should at least show "Sarabun" as an option in gutenberg when I edit a Paragraph block and select the "Typography > Font" dropdown.

Note - this does work when I do these steps on the 2022 theme.

QUESTION - Does anyone know why the font (eg "Sarabun") wouldn't be showing?

I have an FSE-related question

• I'm trying to add a font to the 2023 theme but it's not showing in Gutenberg editor.
• In theme.json, in the "settings.typography.fontFamilies" section, I added the following fontFamily definition:

{
    "fontFamily": "Sarabun, sans-serif",
    "name": "Sarabun",
    "slug": "sarabun"
},

I realize that this doesn't import the actual font definition files (...woff2), but I think it should at least show "Sarabun" as an option in gutenberg when I edit a Paragraph block and select the "Typography > Font" dropdown.

Note - this does work when I do these steps on the 2022 theme.

QUESTION - Does anyone know why the font (eg "Sarabun") wouldn't be showing?

• fonts
• full-site-editing
• theme.json

Share Improve this question edited Oct 28, 2023 at 21:51 Tom J Nowell♦ 60.7k77 gold badges7777 silver badges147147 bronze badges asked Oct 28, 2023 at 21:18 Joshua JJ SJoshua JJ S 3155 bronze badges 5

• did you set your site to dev mode? theme.json gets cached for performance reasons so if you're not telling your WP install it's a dev or local environment it'll assume it's a production env and cache theme.json and ignore your changes. Also have you tried declaring the files to use? – Tom J Nowell ♦ Commented Oct 28, 2023 at 21:52
• no I don't have it in dev mode - ie in wp-config.php I have "define( 'WP_DEBUG', false );". I'm not sure what you mean by "declaring the files to use" - Can you please explain that a bit more? Although, when I switch to the 2022 theme I do see the new font in the "Typography > Font" dropdown. – Joshua JJ S Commented Oct 28, 2023 at 23:38
• most likely because it's re-reading theme.json when you switch. WP_DEBUG is an ancient debugging constant, but a few major releases ago a new constant was added to wp-config.php that lets you hint to WordPress what kind of environment it's on, e.g. a local env, dev env, staging, production and WordPress will behave slightly differently depending on how it's set. By default it assumes it's a production site. It will even set WP_DEBUG for you if you say it's a dev environment: developer.wordpress.org/advanced-administration/wordpress/… – Tom J Nowell ♦ Commented Oct 29, 2023 at 14:17
• as for declaring what files to use, "I realize that this doesn't import the actual font definition files (...woff2), " I meant doing exactly that, declaring in theme.json the files you intend to use. Note though that you should not be modifying 2022 or 2023, you're meant to create child themes so that your changes aren't destroyed when those themes get updated and your modifications remain separate. Last thing you want is to have to redo them all again because you want features and changes in an updated version of the original like form blocks – Tom J Nowell ♦ Commented Oct 29, 2023 at 14:19
• Also if you did declare the font files, WP would conditionally load and enqueue them automatically when they're used, and it'd use the font loader work that's been done in gutenberg so it was always the current state of the art, better than a naive import in CSS. WP would also automatically add it to the upcoming font library, import it correctly in the editor, and display it – Tom J Nowell ♦ Commented Oct 29, 2023 at 14:27

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

@TomJNowell - Thanks for this detail info, clarification and advice. I didn't know about the new debug constant so will learn how to utilize that, and will use a child theme.

I wasn't able to fix this issue, so I spun up a new server and my font updates worked. So I'll just abandon the original server. I'm learning the full site editor and wp theme development so I don't have to keep that old server.

Thanks, Josh

I cannot see my font. but when I rename the folder of Theme TT4, suddenly every font shows up in Gutenberg editor !! what is the reason? and should I rename a folder or make a child theme?

after this, I renamed it back to the original name, but same issue, could not see the font. what is the reason behind it?

本文标签： fontsAdd fontFamily object to themejson