Webfonts: lazily load registered webfonts in the editor

[zaguiini]

What problem does this address?

To preview webfonts in the editor, we need to emit all the registered webfonts, even if they're not enqueued. That means that every single registered font face gets on the page, and that's obviously not performant.

We need to lazily load the fonts in the editor, as they're picked in the typography settings.

What is your proposed solution?

Lazy-loading the selected webfont in the picker can be done by using a mechanism similar to what the webfontloader project was doing years ago. Of course, we can't use that project since it's too old, unmaintained, and contains a bunch of stuff that we don't need... but the principle is sound.

Basically, we can write a small script that injects in the DOM the styles required for the webfonts. Writing that script is an easy task, however, the only reason I haven't attempted to implement such a feature is that I wasn't sure if we want to hook in the font-family pickers themselves, or if we should create a more abstract implementation for hooking in onChange events for all controls, and then use that in the font-family pickers.

Hooking directly in the font-family pickers is the easy way and we can do it without any significant issues.

[hellofromtonya]

I believe this issue is no longer applicable with the new and coming font management that brings the Font Library and user workflows into the font pickers.

As shared in Ongoing Roadmap update #41479 (comment), the Fonts API will no longer be involved in what fonts are shown in the editor or font pickers.

This issue #51151 focused on refining the font pickers.

Therefore, I think this issue can be closed.

Thank you everyone for your contributions.