[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           |   Keywords:
  Focuses:                   |
-----------------------------+-----------------------------
 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;}
 }}}

 It seems that the wrong "fontFamily" attribute, the one of the preset, is
 now used as font-family property value inside font-face declaration (in
 the new wp-includes/fonts/class-wp-font-face.php). Is there a specific
 reason for this?

 As for all other font size or spacing preset values, it should be possible
 to reference another CSS variable in font families too. It may be
 necessary to inject variables from a third-party framework into the
 theme.json, as in my first example. IMO I think that the value of the
 preset and its "fontFamily" attribute should be able to be different from
 the "fontFamily" value to be used in the font-face, as was the case before
 6.4.

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