[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:  reopened
 Priority:  normal                      |   Milestone:  Future Release
Component:  Themes                      |     Version:  6.4
 Severity:  normal                      |  Resolution:
 Keywords:  has-patch needs-unit-tests  |     Focuses:
----------------------------------------+-----------------------------

Comment (by webmandesign):

 I've merged the trunk into my branch and the Playground seems to be
 working fine now.

 I'm not at home writing tests, so if someone could help, it would be
 faster. Thanks!

 There should be no effect on other themes. If there is, it's because the
 theme is trying to bypass this currently incorrect WordPress behavior with
 some hack, I think.

 The fix here is really just for using correct `fontFamily` value - the one
 set in the actual `fontFace` should be used (the
 `settings.typography.fontFamilies[0].fontFace.fontFamily` setting in
 `theme.json`).
 But currently the `settings.typography.fontFamilies[0].fontFamily` is used
 instead, which is wrong.

 ----

 I've tested anew, here is how:

 1. On WP6.8.2 I added this into Twenty Twenty-Five theme's `theme.json`
 `settings`:

 {{{
 "custom": {
         "test": {
                 "font-family": "'Fira code', cursive"
         }
 }
 }}}

 2. In `twentytwentyfive/styles/typography` folder I've created new file
 `typography-preset-test.json` with this content:

 {{{
 {
         "version": 3,
         "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
         "title": "Test font",
         "slug": "typography-preset-test",
         "settings": {
                 "typography": {
                         "fontFamilies": [
                                 {
                                         "name": "Test font",
                                         "slug": "test",
                                         "fontFamily": "var(--wp--custom--
 test--font-family)",
                                         "fontFace": [
                                                 {
                                                         "src": [
 "file:./assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"
                                                         ],
                                                         "fontWeight": "300
 400 700",
                                                         "fontStyle":
 "normal",
                                                         "fontFamily":
 "\"Fira Code\""
                                                 }
                                         ]
                                 }
                         ]
                 }
         },
         "styles": {
                 "typography": {
                         "fontFamily": "var:preset|font-family|test"
                 }
         }
 }

 }}}

 3. In WordPress Site Editor I've chosen the new "Test font" for Styles →
 Typography option.
 4. Checking the front-end page source I've noticed the **wrong** `style
 .wp-fonts-local` output. After I've applied the proposed fix, the `style
 .wp-fonts-local` output was corrected. Here are results:

 {{{
 Wrong (current WP6.8.2 without fix):
 ====================================
 <style class='wp-fonts-local'>
 @font-face {
         font-family: var(--wp--custom--test--font-family);
         font-style: normal;
         font-weight: 300 400 700;
         font-display: fallback;
         src: url('.../assets/fonts/fira-code/FiraCode-
 VariableFont_wght.woff2') format('woff2');
 }
 </style>

 Correct (fixed):
 ================
 <style class='wp-fonts-local'>
 @font-face {
         font-family: "Fira Code";
         font-style: normal;
         font-weight: 300 400 700;
         font-display: fallback;
         src: url('.../assets/fonts/fira-code/FiraCode-
 VariableFont_wght.woff2') format('woff2');
 }
 </style>
 }}}

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