Install fonts in Font Library in WP 6.5 not working on multisite using Twenty Twenty-four

[hartsook]

Fonts install in the e.g. "uploads/sites/8/fonts" directory on the proper "site" in multisite. The new font shows up in the Font Library in Styles Typography, but is not rendered either in the Style Book or the front end.

Here is the theme.json for the installed font:

		"fontFace": [
			{
				"fontFamily": "\"Alegreya Sans SC\"",
				"fontStyle": "normal",
				"fontWeight": "500",
				"src": "http://eosfse.movingmoment.com/wp-content/uploads/sites/8/fonts/mtGm4-RGJqfMvt7P8FUr0Q1j-Hf1DrpG0iFrMYJ_K-4.woff2"
			},
			{
				"fontFamily": "\"Alegreya Sans SC\"",
				"fontStyle": "italic",
				"fontWeight": "500",
				"src": "http://eosfse.movingmoment.com/wp-content/uploads/sites/8/fonts/mtGk4-RGJqfMvt7P8FUr0Q1j-Hf1BkxdBidhMKB6O-51OA.woff2"
			}
		],
		"fontFamily": "\"Alegreya Sans SC\", sans-serif",
		"name": "Alegreya Sans SC",
		"slug": "alegreya-sans-sc"
	}
],

[hartsook]

BTW, the html/css thinks it's getting the Alegreya Sans SC, but that's not the font that's being displayed:

h2 {

font-family: var(--wp--preset--font-family--alegreya-sans-sc);
font-size: var(--wp--preset--font-size--large);

}

[peterwilsoncc]

Hi @hartsook and thanks for the ticket.

I'm unable to reproduce this bug, adding the font via the font library on a sub site displays as expected (see screen shot). The steps I took are:

1. Install fresh Multisite installation
2. Create sub site
3. Install Alegreya Sans SC font via site editor
4. Set the new font for all elements (Headings, text, captions, etc) in the style editor
5. Save site & open front end, fonts appeared as expected
6. Repeat set up for sub-site, fonts appeared as expected

Fonts added via the font library are configured via the global styles, it's not required to add the font library fonts in theme.json. For theme fonts, you can include the file in the theme and ​reference them with file values.

While looking at the JSON you provided, I also noticed an apparent typo: there are two closing square brackets but only one is opened.

[peterwilsoncc]

@hartsook I've posted a reply but it appears trac had a glitch sending out the notifications.
https://core.trac.wordpress.org/ticket/60957#comment:2

[sabernhardt]

I get mixed content errors in the browser console. The site enforces HTTPS, but the font refers to the unsecured (sub)domain.

[poena]

I am also unable to reproduce this on a fresh Multisite installation.

I'm not sure the theme.json is relevant if the font is installed with the Font Library and the font is applied to the blocks in the Site Editor. Font family changes that are made in the Site Editor are saved in the database and are used instead of theme.json.

Perhaps there are steps to reproduce it that are missing?

After installing the font using the Font library, did you export the theme to get the updated copy of theme.json?
Or did you manually add it to theme.json? For what purpose?

[hartsook]

I used Create Block Theme plugin feature to save the changes to the theme.json.

[RavanH]

Yup, I'm running into the exact same thing but with Twenty Twenty-Five.

This happens on a Multi-site in subdomain mode that is installed on https. Our SSL license has a wildcard subdomain and the server responds with HTST so all traffic is forced to https.

However, sub-sites on subdomain installations will be created with home and siteurl in http scheme. This does not appear to hinder anything except in the case of font files that were installed via the Site Editor.

These files are referenced over http in the front end page source, which means they are blocked as mixed content by the browser, breaking any custom font rendering.

If I go to the Network > Sites and manually change http to https in the home and siteurl fields for the sub-site, the issue is resolved. But it's annoying to have to do that on each new sub-site...

So to reproduce:

1. prepare your server/domain for https with a subdomain wildcard
2. set up a permanent redirect of all http traffic to https
3. create a multi-site installation in subdomain mode (not subdirectory)
4. create a sub-site (as an anonymous user via the front end for good measure)
5. log in as new user into your new site and go to Editor > Styles > Edit styles > Typography > Fonts > Install fonts
6. Install a new font from Google Fonts and then set regular Text or Headings to use that font

Visit the site home page and notice the new font is not rendered and a mixed content error occurs in the browser console.

To "fix":

1. log back in as super-admin and go to Network > Sites
2. Edit the new site Site URL from http to https
3. Go back to the new sub-site and repeat the above to re-install a font (you will need to uninstall the failing font)