Filter out unused webfonts from the front-end

[zaguiini]

Related to #37140.

This is definitely not the final version but it works. I'm trying to filter out the unused fonts from the front-end, only for the end-user who's browsing the site.

There are probably better ways of doing this. One obvious improvement to this would be not to filter it out every time but only after saving template/global style changes as an option for example.

Another possible enhancement would be to instead of removing unused fonts, include the used fonts, this way avoiding huge loops inside the available fonts array. Think of having 1000+ possible fonts and iterating only over the used blocks and global styles.

---

I also need to include var(--wp--preset-typography--font-family--%s) in the mix. Actually, do I? It looks like when you set a custom font family through the editor, the var:preset|font-family|%s format is what I get. I'd like to:

1. understand the rationale between the two formats;
2. if there is a way to standardize so I don't have to parse that by myself.

---

@aristath thoughts on this solution?

[justintadlock]

Until every single block includes a font-family option, this is problematic because a theme could be using a webfont that is "picked" but was intended to be loaded.

For example, I have a custom block style on Social Icons called "Hand Drawn", which uses a specific font that may be unlikely to be used with other text-related blocks. Because Social Icons has no Typography > Font Family option, the only way to set the font-family value for is by targeting the block style via CSS. If WP doesn't load that handwriting font, then the block style is broken.

I have similar custom styles on Image and other blocks.

If WP blocks registered fonts that are "not in use," it will block a lot of valid use cases like the above where theme authors have needed to work around the current system. I'm excited about the webfonts API, but this change would be a blocker for me to use it.

On the other hand, if we had a way to tell WP to always load specific fonts, that could work with this.

[zaguiini]

Thanks for the thoughts, @justintadlock!

Because Social Icons has no Typography > Font Family option

Wouldn't it be better if it had? Like, what if we push an update to the blocks so they could use the font family attribute instead of having to use a custom class (which looks more like a workaround than a solution, to be fair).

Anyway, one possibility would be to include a filter or an action that would allow WP to always register some font, regardless if it's visible to the code or not.

[zaguiini]

I'm mostly focusing on #39099 now, but the principle is the same.

[justintadlock]

Wouldn't it be better if it had? Like, what if we push an update to the blocks so they could use the font family attribute instead of having to use a custom class (which looks more like a workaround than a solution, to be fair).

Absolutely. That's the big problem right now. Theme authors are having to work around this because not all blocks support font-family. If that changes, there's no need for the workarounds.

Mostly, I just want to make sure this issue is highlighted early in the cycle so we can move everyone along to using the latest APIs.

Anyway, one possibility would be to include a filter or an action that would allow WP to always register some font, regardless if it's visible to the code or not.

That's definitely a good route to go.

Edit: Side note: An action/filter may not be the best option when dealing with global style variations since these are just in *.json files. But, full block support of typography options is best anyway.