0

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"
  }
}
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
    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
    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
    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
    Aug 26, 2023 at 21:47

1 Answer 1

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.

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.