[wp-trac] [WordPress Trac] #59911: WordPress 6.4 changes the font-face generation using wrong fontFamily attribute from theme.json preset

[WordPress Trac]

#59911: WordPress 6.4 changes the font-face generation using wrong fontFamily
attribute from theme.json preset
-------------------------------+------------------------------
 Reporter:  alexandrebuffet    |       Owner:  (none)
     Type:  defect (bug)       |      Status:  new
 Priority:  normal             |   Milestone:  Awaiting Review
Component:  Themes             |     Version:  6.4
 Severity:  normal             |  Resolution:
 Keywords:  reporter-feedback  |     Focuses:
-------------------------------+------------------------------

Comment (by alexandrebuffet):

 Thanks for the reply @ironprogrammer !

 I understand the problem initially raised in the GB PR 54615. 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
 [https://github.com/WordPress/gutenberg/pull/54615#issuecomment-1726340510
 matiasbenedetto proposal] 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 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
 [https://github.com/WordPress/gutenberg/pull/54615#issuecomment-1726378567
 he says in a comment further on] in the discussion.

 Returning to my example above, the value of the "fontFamily" entry in a
 preset should never correspond to the value in the @font-face, since this
 is the value of my variable to be applied in CSS and not necessarily the
 name of my font to be loaded.

 Here's a more detailed example of a declaration in my theme.json. For the
 example, I don't split the font family value to get the first value to
 better understand the inconsistency.

 {{{
 "fontFamilies": [
     {
         "fontFamily": "var(--font-primary)", // Generates the preset
 token: --wp--preset--font-family--primary: var(--font-primary).
         "name": "Primary (Haffer)",
         "slug": "primary",
         "fontFace": [
             {
                 "fontFamily": "Haffer", // Should generate: @font-face: {
 font-family:"Haffer"; ... } not @font-face: { font-family:var(--font-
 primary); ... }
                 "fontStretch": "normal",
                 "fontStyle": "normal",
                 "fontWeight": "400 700",
                 "src": ["file:./assets/fonts/haffer/Haffer-Upright-
 VariableFont.woff2"]
             }
         ]
     },
     {
         "fontFamily": "var(--font-secondary)", // Generates the preset
 token: --wp--preset--font-family--secondary: var(--font-secondary).
         "name": "Secondary (Grenette Pro)",
         "slug": "secondary",
         "fontFace": [
             {
                 "fontFamily": "Grenette Pro", // Should generate: @font-
 face: { font-family:"Grenette Pro"; ... } not @font-face: { font-
 family:var(--font-secondary); ... }
                 "fontStretch": "normal",
                 "fontStyle": "italic",
                 "fontWeight": "400",
                 "src": ["file:./assets/fonts/grenette-pro/Grenette-Pro-
 Italic.woff2"]
             }
         ]
     },
     {
         "fontFamily": "system-ui, sans-serif", // Will generate : --wp--
 preset--font-family--system: system-ui, sans-serif.
         "name": "System",
         "slug": "system"
         // No @font-face to generate.
     }
 ],
 }}}

 But in any case, the problem is the same if I didn't use a CSS variable as
 a value.

 {{{
 "fontFamilies": [
     {
         "fontFamily": "Haffer, Inter, system-ui, sans-serif", // Generates
 the preset token: --wp--preset--font-family--primary: Haffer, Inter,
 system-ui, sans-serif.
         "name": "Primary (Haffer)",
         "slug": "primary",
         "fontFace": [
             {
                 "fontFamily": "Haffer", // Should generate: @font-face: {
 font-family:"Haffer"; ... } not @font-face: { font-family:"Haffer, Inter,
 system-ui, sans-serif"; ... }
                 "fontStretch": "normal",
                 "fontStyle": "normal",
                 "fontWeight": "400 700",
                 "src": ["file:./assets/fonts/haffer/Haffer-Upright-
 VariableFont.woff2"]
             }
         ]
     },
     {
         "fontFamily": "Grenette Pro, serif", // Generates the preset
 token: --wp--preset--font-family--secondary: Grenette Pro, serif.
         "name": "Secondary (Grenette Pro)",
         "slug": "secondary",
         "fontFace": [
             {
                 "fontFamily": "Grenette Pro", // Should generate: @font-
 face: { font-family:"Grenette Pro"; ... } not @font-face: { font-
 family:"Grenette Pro, serif"; ... }
                 "fontStretch": "normal",
                 "fontStyle": "italic",
                 "fontWeight": "400",
                 "src": ["file:./assets/fonts/grenette-pro/Grenette-Pro-
 Italic.woff2"]
             }
         ]
     },
     {
         "fontFamily": "system-ui, sans-serif", // Will generate : --wp--
 preset--font-family--system: system-ui, sans-serif.
         "name": "System",
         "slug": "system"
         // No @font-face to generate.
     }
 ],
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/59911#comment:3>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform