Description

If you have a font family with a slug containing a number the presets renders presets wrongly and the font is not loaded. Example with a font called N27 and using slug n27.

In this case CSS property that is given to the elements is:

font-family: var(--wp--preset--font-family--n27);

Meanwhile the preset definition in <style id="global-styles-inline-css"> is:

--wp--preset--font-family--n-27: n27;

Pay attention to the dash in the preset definition vs the lack of it in the element font-family value: ...--n-27 vs ...--n27

Step-by-step reproduction instructions

1. Add a font family with a number in their name to your theme.json file.

Example:

{
	"fontFace": [
		{
			"fontFamily": "n27",
			"fontStyle": "normal",
			"fontWeight": "700",
			"src": [
				"file:./assets/fonts/n27_normal_700.woff2"
			]
		},
		{
			"fontFamily": "n27",
			"fontStyle": "normal",
			"fontWeight": "400",
			"src": [
				"file:./assets/fonts/n27_normal_400.woff2"
			]
		},
		{
			"fontFamily": "n27",
			"fontStyle": "italic",
			"fontWeight": "400",
			"src": [
				"file:./assets/fonts/n27_italic_400.woff2"
			]
		}
	],
	"fontFamily": "n27",
	"slug": "n27"
}

2. Set this font family to an element and save
3. Load the public page displaying the element.
4. Check that the font family is not applied.

Screenshots, screen recording, code snippet

You can download and use these theme to test. It is using the font called N27:

ih23-structure.zip

Environment info

• WordPress core 6.3 with and without Gutenberg 16.4

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes