WordPress.org
Get WordPress

Make WordPress Core

Opened 13 months ago

Closed 12 months ago

Last modified 12 months ago

#59876 closed defect (bug) (invalid)

Theme.json fontWeight issue with shared slug names and fontFace

Reported by: dogwonder's profile dogwonder Owned by:
Milestone: Priority: normal
Severity: minor Version: 6.4
Component: Themes Keywords:
Focuses: Cc:

Description

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

Change History (3)

#1 @dogwonder
13 months ago

I've done some further investigation on this and it appears when theme.json is rendered into the <head> as <style id='wp-fonts-local'> it strips out the shared slug names and only renders the last declared font in theme.json fontFamilies[].

e.g. 

<style id="wp-fonts-local">
@font-face {
	font-family: colfax-web;
	font-style: normal;
	font-weight: 700;
	font-display: fallback;
	src: url('https://staging.one.org/wp-content/themes/oneorg/dist/fonts/colfax-web/ColfaxWebBold.woff2') format('woff2')
}
@font-face {
	font-family: italian-plate;
	font-style: normal;
	font-weight: 700;
	font-display: fallback;
	src: url('https://staging.one.org/wp-content/themes/oneorg/dist/fonts/italian-plate/ItalianPlate-Demibold.woff2') format('woff2')
}
</style>

and this is 6.3:

<style id='wp-webfonts-inline-css'>
@font-face {
	font-family: colfax-web;
	font-style: normal;
	font-weight: 400;
	font-display: fallback;
	src: url('http://dev.one.org/wp-content/themes/oneorg/dist/fonts/colfax-web/ColfaxWebRegular.woff2') format('woff2')
}
@font-face {
	font-family: colfax-web;
	font-style: normal;
	font-weight: 500;
	font-display: fallback;
	src: url('http://dev.one.org/wp-content/themes/oneorg/dist/fonts/colfax-web/ColfaxWebMedium.woff2') format('woff2')
}
@font-face {
	font-family: colfax-web;
	font-style: normal;
	font-weight: 700;
	font-display: fallback;
	src: url('http://dev.one.org/wp-content/themes/oneorg/dist/fonts/colfax-web/ColfaxWebBold.woff2') format('woff2')
}
@font-face {
	font-family: italian-plate;
	font-style: normal;
	font-weight: 700;
	font-display: fallback;
	src: url('http://dev.one.org/wp-content/themes/oneorg/dist/fonts/italian-plate/ItalianPlate-Demibold.woff2') format('woff2')
}
</style>
Last edited 13 months ago by dogwonder (previous) (diff)

#2 @ironprogrammer
12 months ago

  • Keywords needs-testing removed
  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed

Welcome to Trac, @dogwonder! Thank you for the report!

Variations within a particular font (e.g. Colfax Web) should be individual fontFace arrays under a shared top-level fontFamily. Please refer to the "Secondary" font in the code sample from ​Registering web fonts (font faces).

As noted in related ticket #59911, in 6.4 the rendered @font-face values are determined by the first font that is found in the typography.fontFamilies.fontFamily prop (see ​GB PR 54615). The font resolver expects one top-level fontFamily per face, so each subsequent re-defining of the same font overwrites the last, causing the behavior you've noted.

I recommend checking out the ​`theme.json` docs or forums (​https://wordpress.org/support/forums/) for additional details and support. Please feel free to reopen this ticket if I've missed something and adjusting the theme.json isn't working as expected.

#3 @dogwonder
12 months ago

Excellent thanks for pointing out @ironprogrammer !

I've amended the theme.json with the following and all appears to be working as expected. Many thanks for pointing me in the right direction. 

{
					"name": "Colfax",
					"slug": "colfax-web", 
					"fontFamily": "\"colfax-web\", sans-serif",
					"fontFace": [
						{
							"fontFamily": "colfax-web",
							"fontWeight": "400",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./dist/fonts/colfax-web/ColfaxWebRegular.woff2" ]
						}, 
						{
							"fontFamily": "colfax-web",
							"fontWeight": "500",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./dist/fonts/colfax-web/ColfaxWebMedium.woff2" ]
						}, 
						{
							"fontFamily": "colfax-web",
							"fontWeight": "700",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./dist/fonts/colfax-web/ColfaxWebBold.woff2" ]
						}, 
						{
							"fontFamily": "colfax-web",
							"name": "Colfax Web - Black",
							"slug": "colfax-web", 
							"fontFamily": "colfax-web",
							"fontWeight": "900",
							"fontStyle": "normal",
							"src": [ "file:./dist/fonts/colfax-web/ColfaxWebBlack.woff2" ]
						}
					]
				},
Version 0, edited 12 months ago by dogwonder (next)
Note: See TracTickets for help on using tickets.