[wp-trac] [WordPress Trac] #59876: Theme.json fontWeight issue with shared slug names and fontFace

[WordPress Trac]

#59876: Theme.json fontWeight issue with shared slug names and fontFace
--------------------------+-----------------------------
 Reporter:  dogwonder     |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Themes        |    Version:  6.4
 Severity:  minor         |   Keywords:  needs-testing
  Focuses:                |
--------------------------+-----------------------------
 In theme.json, previously if I declared different a fontFace src using the
 same slug, but different font weights it would render text as expected.
 I've now confirmed this on two production sites that were recently
 upgraded to 6.4.

 Expected behaviour: font-normal.woff2 would render as font-weight: 400,
 font-bold.woff2 would render as font-weight: 700, etc.

 Current behaviour: everything is rendered as the last declared font-face.
 I've confirmed this is the case in Chrome and Safari (latest)

 With the 6.4 (and 6.4.1) release it appears to only render the last
 declared font. Here is an example that worked fine with all 6.x releases:

 See the below example from theme.json:

 {{{
 {
         "fontFamily": "\"colfax-web\", sans-serif",
         "name": "Colfax - Regular",
         "slug": "colfax-web",
         "fontFace": [
                 {
                         "fontFamily": "colfax-web",
                         "fontWeight": "400",
                         "fontStyle": "normal",
                         "src": [ "file:./dist/fonts/colfax-
 web/ColfaxWebRegular.woff2" ]
                 }
         ]
 },
 {
         "fontFamily": "\"colfax-web\", sans-serif",
         "name": "Colfax Web - Medium",
         "slug": "colfax-web",
         "fontFace": [
                 {
                         "fontFamily": "colfax-web",
                         "fontWeight": "500",
                         "fontStyle": "normal",
                         "src": [ "file:./dist/fonts/colfax-
 web/ColfaxWebMedium.woff2" ]
                 }
         ]
 },
 {
         "fontFamily": "\"colfax-web\", sans-serif",
         "name": "Colfax Web - Bold",
         "slug": "colfax-web",
         "fontFace": [
                 {
                         "fontFamily": "colfax-web",
                         "fontWeight": "700",
                         "fontStyle": "normal",
                         "src": [ "file:./dist/fonts/colfax-
 web/ColfaxWebBold.woff2" ]
                 }
         ]
 }
 }}}

 And the CSS using to declare the body font:


 {{{
 body {
    font-family: var(--wp--preset--font-family--colfax-web);
    font-weight: 400;
 }
 }}}

 I would expect ColfaxWebRegular.woff2 to render as the body font, however
 what I get is ColfaxWebBold.woff2 the last declared font from the same
 font-family shared slug. I can confirm the fonts are present and the paths
 are correct, removing the other theme.json references to bold, italic
 renders the normal fontFace.

 Interestingly inspecting the CSS shows the font-weight as rendering
 correctly:

 https://share.cleanshot.com/DzZvp8F4

 But visually it's most certainly the bold variant that is getting loaded:

 6.4

 https://share.cleanshot.com/X9Z9MwgJ

 6.3.1

 https://share.cleanshot.com/HBb4z6w6

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