Theme.json: styles.typography.FontFamily renders as default font in front end but not editor

admin管理员组

文章数量:1124382

The following theme.json settings work as expected on the front end: var(--wp--preset--font-family--greyclif) is defined for the "font-family" in the main styles in the body{} tag, and any block without a specifically defined font family renders as Greyclif.

However, in the block editor, any instance where font family is not explicitly defined renders in the web client's default "sans-serif". There is no universal font-family default defined in the styles. The font is available, and can be manually selected, and it renders correctly if selected. But it does not render by default.

Is there something I'm missing here, or is this just another bug?

"styles": {
  "typography": {
    "fontFamily": "var(--wp--preset--font-family--greyclif)",
    "fontSize": "var(--wp--preset--font-size--sm)",
    "lineHeight": "1.375"
  }
}

The following theme.json settings work as expected on the front end: var(--wp--preset--font-family--greyclif) is defined for the "font-family" in the main styles in the body{} tag, and any block without a specifically defined font family renders as Greyclif.

However, in the block editor, any instance where font family is not explicitly defined renders in the web client's default "sans-serif". There is no universal font-family default defined in the styles. The font is available, and can be manually selected, and it renders correctly if selected. But it does not render by default.

Is there something I'm missing here, or is this just another bug?

"styles": {
  "typography": {
    "fontFamily": "var(--wp--preset--font-family--greyclif)",
    "fontSize": "var(--wp--preset--font-size--sm)",
    "lineHeight": "1.375"
  }
}

• block-editor
• theme.json

Share Improve this question asked Aug 26, 2023 at 19:16 StudioAlStudioAl 48411 gold badge33 silver badges1515 bronze badges 4

• How are you registering that font family? Is there a reason it isn't being done using theme.json? Note that I don't mean using the variables, but rather declaring that there is a font, that it can be found in a specific file etc and letting WordPress generate the CSS variables and fontface declarations itself, e.g. github.com/WordPress/twentytwentythree/blob/trunk/… is that how you're registering it? Have you confirmed this isn't a theme.json caching problem? – Tom J Nowell ♦ Commented Aug 26, 2023 at 21:07
• @TomJNowell It's coming from a font delivery service where you can only use a style link or @import link, so it is being enqueued via functions.php, and then defined in settings.typography.fontFamilies (just not the source—just name, slug, and fontFamily stack). But there's no issue in how the font face is loading or rendering. It renders as it should on both the front and the back end when it's selected, it's just that the back end ignores the styles.typography.FontFamily default when it isn't explicitly selected. – StudioAl Commented Aug 26, 2023 at 21:23
• 1 is this observed behaviour or are you seeing specific styling rules overriding this? Can you include the settings part of the theme.json in its entirety as well as any other font families you've defined? It's very likely that you've ommitted something related but considered unimportant that will highlight a problem or eliminate a large number of questions – Tom J Nowell ♦ Commented Aug 26, 2023 at 21:27
• @TomJNowell Ahah! I swear I didn't see it at all before the last many times I web inspected this, but now I see that it actually was defined, but was being overwritten by a declaration in a custom editor stylesheet that I'm not even using. Wordpress is working as expected. Thanks for asking the right questions to get me searching—even if it was down a different path! – StudioAl Commented Aug 26, 2023 at 21:47

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

In my case the theme.json was set up correctly and behaving properly. There was an errant editor stylesheet being loaded that shouldn't have been there adding font-family:sans-serif; to .editor-styles-wrapper which was overriding the the "var(--wp--preset--font-family--greyclif)" declaration.

本文标签： Themejson stylestypographyFontFamily renders as default font in front end but not editor