Font Face: Inconsistency between font-family value in theme.json preset and font-family value in generated @font-face.

[alexandrebuffet]

Description

This issue refers to ticket 59911 on track.

WordPress 6.4 shipped an update where the @font-face { font-family:... value is set to the first font found in the typography.fontFamilies.fontFamily prop in theme.json (see PR #54615).

I understand the problem initially raised in the PR but I don't understand the point of separating the values of the preset's "fontFamily" value for use in the @font-face when the "fontFamily" entry in the "fontFace" is specifically designed for this.

I think that @matiasbenedetto proposal in PR is much more consistent with the code that needs to be generated and, above all, makes it possible to differentiate between the preset value and the font-face value in theme.json.

In addition to having more consistency, it would also technically reduce the need to split the values to arrive at the same result for the generation of the @font-face as he says in a comment further on in the discussion.

Here's an example below to illustrate that the value of the "fontFamily" entry in a preset should not be used to generate the value of @font-face, since this value can be a CSS variable and not necessarily the name of the font to be loaded.

Step-by-step reproduction instructions

1. Open theme.json in your favorite code editor
2. Register new font families as follow:

"fontFamilies": [
    {
        "fontFamily": "var(--font-primary)",
        "name": "Primary (Inter)",
        "slug": "primary",
        "fontFace": [
            {
                "fontFamily": "Inter",
                "fontStretch": "normal",
                "fontStyle": "normal",
                "fontWeight": "400 700",
                "fontDisplay": "swap",
                "src": ["file:./assets/fonts/Inter-VariableFont_slnt,wght.woff2"]
            },
            {
                "fontFamily": "Inter",
                "fontStretch": "normal",
                "fontStyle": "oblique 14deg",
                "fontDisplay": "swap",
                "fontWeight": "400 700",
                "src": ["file:./assets/fonts/Inter-VariableFont_slnt,wght.woff2"]
            }
        ]
    },
],

3. Open any page of your site in your favorite browser
4. Open inspector
5. Notice in code the generated @font-face with inconsistent font-family

Screenshots, screen recording, code snippet

For various reasons, I used to declare font families in theme.json as follows:

"fontFamilies": [
    {
        "fontFamily": "var(--font-primary)",
        "name": "Primary (Halcom)",
        "slug": "primary",
        "fontFace": [
            {
                "fontFamily": "Halcom Variable",
                "fontStretch": "normal",
                "fontStyle": "normal",
                "fontWeight": "500 700",
                "src": ["file:./assets/fonts/halcom/Halcom-VariableFont_slnt,wght.woff2"]
            }
        ]
    },
    {
        "fontFamily": "var(--font-secondary)",
        "name": "Secondary (Oskar)",
        "slug": "secondary",
        "fontFace": [
            {
                "fontFamily": "Oskar",
                "fontStretch": "normal",
                "fontStyle": "normal",
                "fontWeight": "700",
                "src": ["file:./assets/fonts/oskar/Oskar-One-Bold.woff2"]
            }
        ]
    }
],

Before WordPress 6.4, the result of the generated @font-face was as follows:

@font-face{font-family:"Halcom Variable";font-style:normal;font-weight:500 700;font-display:fallback;src:url('https://test.com/app/themes/my-theme/assets/fonts/halcom/Halcom-VariableFont_slnt,wght.woff2') format('woff2');font-stretch:normal;}
@font-face{font-family:Oskar;font-style:normal;font-weight:700;font-display:fallback;src:url('https://test.com/app/themes/my-theme/assets/fonts/oskar/Oskar-One-Bold.woff2') format('woff2');font-stretch:normal;}

Since WordPress 6.4, the generated @font-face is as follows:

@font-face{font-family:var(--font-primary);font-style:normal;font-weight:500 700;font-display:fallback;src:url('http://test.local/app/themes/my-theme/assets/fonts/halcom/Halcom-VariableFont_slnt,wght.woff2') format('woff2');font-stretch:normal;}
@font-face{font-family:var(--font-secondary);font-style:normal;font-weight:700;font-display:fallback;src:url('http://test.local/app/themes/my-theme/assets/fonts/oskar/Oskar-One-Bold.woff2') format('woff2');font-stretch:normal;}

Environment info

• WordPress 6.4.2

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

Yes

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

Yes