All fonts in Font Library get loaded, even if not in use

[luminuu]

Description

On testing with the latest nightly release (6.5-RC3-57880), I noticed that all fonts that have been uploaded to the Font Library get loaded in the frontend, even if they are not in use.

Step-by-step reproduction instructions

1. Update WP to latest nightly, at least 6.5-RC3-57880
2. Upload/add fonts via the Font Library, source does not matter
3. Only use one font (in my case Barlow) for all the typography settings
4. Open the frontend and check the fonts in the network tab, they're all loaded

Screenshots, screen recording, code snippet

Environment info

• WP 6.5-RC3-57880
• No Gutenberg

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

[creativecoder]

I believe this is expected (though not ideal) behavior at this point. All active fonts (fonts that are checked in the font library and thus loaded into global styles) are loaded on the site.

This isn't specific to the font library. If theme.json or user level global styles defines fonts, all of them are loaded, whether they are used or not.

It would be good to add some kind of detection for which fonts are used on each page and load only those fonts. Jetpack has an example of how this could be done, but it's potentially a difficult problem to be sure that we've detected every font that's in use in all cases, given that plugins or themes might not follow standard practices.

I didn't find an existing Gutenberg issue that covers this, but I would change this issue to be a global styles enhancement rather than a font library bug.

cc @hellofromtonya , who I think may have some history/context on this issue from previous work on the (now deprecated) fonts API

[matiasbenedetto]

Hi @luminuu 👋 thanks for testing!

I think this is not a bug, and this issue should be closed as 'not planned'. This is my rationale:

First I would like to display a comparison between the browser inspector network tab of the WordPress editor vs the public frontend of the same site:

Editor	Frontend
All the active fonts are loaded	Only the used fonts are loaded

As you can see in the above table ☝️, in the editor, all active fonts (fonts that are part of the global styles) are loaded and appear in the network tab of the browser inspector. Why? Because these assets are used to create font previews. To avoid this, we should remove the previews from the sidebar or use some kind of image or other technique as the preview of the fonts. We use images as previews in the 'font collections'; see, for example, the previews of the Google Fonts font collection. But in font global styles we can't assume that all the fonts have image previews.

Image	Description
	The sidebar renders a list of fonts ready to be used in the editor

As can be observed in the first table, the public frontend only loads the fonts used in at least one element of the current page. No matter how many fonts your theme has or the user installs using the font library, the browser only downloads the fonts used on the page. This is an optimization built into browsers. No matter how many font faces you define on the page, only the ones used in at least one element are fetched.

It would be good to add some kind of detection for which fonts are used on each page and load only those fonts. Jetpack has an example of how this could be done, but it's potentially a difficult problem to be sure that we've detected every font that's in use in all cases, given that plugins or themes might not follow standard practices.

@creativecoder thanks for looking into this. I think this isn't required, error-prone, and it would add unnecessary complexity and performance overhead. The loading of just the fonts used in the page is defined in the CSS spec and can be tested empirically as in the first table of this comment..

Quoting the CSS spec:

The @font-face rule is designed to allow lazy loading of font resources that are only downloaded when used within a document. A stylesheet can include @font-face rules for a library of fonts of which only a select set are used; user agents must only download those fonts that are referred to within the style rules applicable to a given page. User agents that download all fonts defined in @font-face rules without considering whether those fonts are in fact used within a page are considered non-conformant.

[colorful-tones]

I feel this will keep coming up, and I’ve probably fallen into the trap. Yes, there is no performance impact on the front end. I wish we could somehow output some debug statement because I suspect somebody will reopen this issue every few months or a similar one.

[annezazu]

To prevent confusion for a 6.5.x point release, I'm going to close this out based on the above discussion.