Changing the slug for font-family in theme.json works except for the body

[Humanify-nl]

Description

I changed the slug value in theme.json settings.typography:

      "fontFamilies": [
        {
          "fontFamily": "\"Source Serif Pro\", serif",
          "name": "Source Serif Pro",
          "slug": "main",
          "fontFace": [
            {
              "fontFamily": "Source Serif Pro",
              "fontWeight": "200 900",
              "fontStyle": "normal",
              "fontStretch": "normal",
              "fontDisplay": "swap",
              "src": [
                "file:./assets/fonts/SourceSerif4Variable-Roman.ttf.woff2"
              ]
            }
          ]
        }
      ],

The new variable --wp-preset--font-family--main is succesfully output for blocks.

Except for the body.

See here:

I did a search, nowhere in my theme code is this variable --wp-preset--font-family--source-serif-pro declared, also not in theme.json. It seems to be auto-generated from the font-family name.

However, it works fine for headings and other blocks.

So i'd say this looks like a bug!

Step-by-step reproduction instructions

1. See above example (basically TT2), change the slug in theme.json to 'main'.
2. Make sure that theme.json has: styles.typography { "font-family" : "var(--wp-preset--font-family--main)"}.
3. Open the front-end, inspect the body and look for its font-family declaration on body.

Screenshots, screen recording, code snippet

No response

Environment info

• WP 6.0.2
• No Gutenberg

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

[kathrynwp]

I was able to replicate this with:

• WP 6.0.2
• Twenty Twenty-Two 1.2
• Gutenberg 14.1.1 active or inactive (no other plugins active)

[t-hamano]

My tests yielded different results.

The font-family of the body tag is defined by styles.typography.fontFamily. Also, system font is defined here in the latest TT2:
https://github.com/WordPress/twentytwentytwo/blob/27054dbcb95f5d72cd943a0f3318c3ad97599f85/theme.json#L329

Then, after changing Source Serif Pro's slug to main in fontFamilies > slug, I changed the CSS variable for this line to var(--wp--preset--font-family--main) as well, and confirmed that the font family is applied to the body tag as expected.

However, in the screenshot, source-serif-pro is loaded in the body tag instead of the system font. Perhaps you have changed the font family for the site in the Global Style panel? If so, the old slug might be stored in the database.

[polarstoat]

I'm experiencing the same issue with Wordpress 6.1 and Gutenberg 14.4.0 on a child theme of a custom theme. None of the parent theme's styles.typography.FontFamilies slugs are applied to the body. Strangely though, the issue doesn't occur when using the parent theme on its own.

[carolinan]

If you add new font families you need to update them both in the settings.typography section and in the styles.typography section for it to apply to the body.

Child themes inherit theme.json from the parent unless overridden. So it is possible that the body font is unexpected if a font is added under settings.typography but not styles.typography.

[polarstoat]

The parent theme I'm using (wpengine/frost) loads a custom font family in settings.typography and applies it to the body in styles.typography. It behaves exactly as expected when not being used as a parent theme. I've checked, and there's definitely no user-level global styles in place that could be interfering too.

Through progressive downgrades until the issue is no longer present (as with prior versions of Gutenberg and Wordpress it's worked fine) I've isolated this issue as appearing for me starting with Gutenberg v14.1.0. The most recent versions where the issue isn't present are Wordpress v6.0.3 and Gutenberg v14.0.3 .