Add support for fontFeatureSettings in theme.json

[bgardner]

What problem does this address?

With all of the fonts available to theme developers, it would be great to add support for fontFeatureSettings in theme.json. AFAIK, there is no way to add this setting on a per-font basis. Putting this in a style sheet is not ideal for themes that provide multiple fonts, as there could be some undesirable outcomes depending on which font is selected.

What is your proposed solution?

Include support for font-feature-settings similar to this:

"fontFamily": "Inter, sans-serif",
"name": "Inter",
"slug": "inter",
"fontFace": [
	{
		"fontDisplay": "block",
		"fontFamily": "Inter",
		"fontFeatureSettings": 'cv06', 'cv10', 'cv11', 'ss01', 'ss07', 'ss08',
		"fontStretch": "normal",
		"fontStyle": "normal",
		"fontWeight": "100 900",
		"src": [ "file:./assets/fonts/Inter-Variable.woff2" ]
	}
]

[bgardner]

Noting that this appears to exist (#47127) but is not working as expected.

[bgardner]

@jordesign @richtabor Can one of you switch the tags on this from Enhancement to Bug?

And upon further review, the @font-face rules seem to be in place, but not working:

<style id='wp-fonts-local'>
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:block;src:url('http://localhost:10009/wp-content/themes/powder/assets/fonts/Inter-Variable.woff2') format('woff2');font-feature-settings:'cv06', 'cv10', 'cv11', 'ss01', 'ss07', 'ss08';font-stretch:normal;}
</style>

However, if I add the following CSS in style sheet, it works:

body {
	font-feature-settings: 'cv06', 'cv10', 'ss01', 'ss07', 'ss08';
}

[jordesign]

Sure can @bgardner :)

[t-hamano]

@bgardner Which browser are you testing with? According to Can I use, font-feature-settings inside @font-face doesn't seem to be supported in Chrome or Edge.

[bgardner]

@t-hamano Well snap, that’s something I didn't expect. Usually Chrome is at the forefront of these things, but after testing, I believe you are right. (Which is kind of annoying because Chrome is such a large % of browser.)

[t-hamano]

I don't know why this feature got supported, but technically this issue is a browser support issue, not a Gutenberg issue. So while it's hard to call this a bug, we feel it might be a good idea to update the JSON Schema description to indicate that this feature is not yet supported by major browsers.