WC Fonts: Register imported google fonts for use in the editor

[ryelle]

Use the (experimental?) Fonts API to load selected Google Fonts in block-based themes.

When fonts are loaded via the WordCamp Fonts admin screen, there's no easy way to use them in the editor. The Typography settings don't know about these fonts, and without being able to update the theme.json, a user can't add them.

With this PR, if a site is using a block theme and the user has added a google font to Appearance > Fonts, the font is registered & enqueued using the Fonts API (rather than output in wp_head). It's also loaded into the editor, and listed in the available Typography > Font Family options. When selected, Gutenberg automatically applies style or class, and the font is used.

While this does touch the use of google fonts, this PR does not address anything in #739.

Tech details

• This only works for Google Fonts because we can parse out the individual fonts.
• I've created a new font provider called "wordcamp-google" because by default only local fonts are supported. It's prefixed in case a core provider (or another plugin like Jetpack*) eventually adds Google support.
• It's necessary to enqueue all the fonts, core/GB doesn't currently have a mechanism to load only the fonts in use… but that's not any different than how wp_head_google_web_fonts already works.
• This works best with variable fonts, but as far as I can tell GB does not restrict the weight/style to just the registered values - for example, Rubik Pixels only has 400 weight, no italics, but you can still set it to "Black (900) Italic". The browser faux-italicizes & faux-bolds it. I think this is a core limitation, and not something we need to address.

* Jetpack does have a beta Google Fonts feature, but it's pulling from a small subset of fonts.

Screenshots

This example uses the following settings to load Comfortaa (variable), Tilt Warp (default), Open Sans (normal & italic, 300 weight), & Rubik Pixels (default).

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:[email protected]');
@import url('https://fonts.googleapis.com/css2?family=Tilt+Warp');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;1,300&family=Rubik+Pixels&family=Tilt+Warp&display=swap');

	Editor	Front end
Site editor, setting the default font for all text
Post editor, setting fonts on a specific block

How to test the changes in this Pull Request:

1. Go to google fonts and grab some @import URLs
2. Using a block theme (TT2 or TT3), put those in Appearance > Fonts
3. Load up the editor and try to change the typography of any element
4. The editor preview should match the front end
5. Switch to a non-block theme
6. The fonts are still loaded on the front end (but are not applied to anything without custom CSS)

There are checks in place to make sure this does not break if GB is accidentally disabled.

[pkevan]

Presumably once a google font is enable, it would load it irrelevant of whether it is needed on the page?

Not sure if this is an issue, but couldn't tell from the code if this was possible, or desirable?

[ryelle]

Presumably once a google font is enable, it would load it irrelevant of whether it is needed on the page?

Yep, and that's how the Fonts feature currently works. Once you add the @import to the settings, it loads on all pages. This will do the same thing, enqueuing the font on all pages.

Maybe as the Fonts API evolves it will be able to detect and load like it does for block assets, but right now we need to keep loading them on all pages.

[pkevan]

Given the above, is it worth considering a limit for total number of fonts? Just thinking about extreme cases, or someone doing something unintentional like including every Google font :)

[ryelle]

Is there something about this implementation that would make adding too many fonts worse than on production? I don't mind the idea of adding in some extra checks, but I think it could be done in another PR/issue.

[pkevan]

chatted through with @ryelle as I was working under the assumption that adding Google fonts was a new thing, which it isn't 😄