Add a Webfonts provider for google-fonts #39350
Closed
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
This PR adds a provider for Google Fonts to the Webfonts API.
Why?
How?
In this implementation, the google-fonts provider acts as a proxy for the local provider.
When a user/developer defines a google-font, we get that font server-side, save the files in
wp-content/fonts/{font-name}/{filename}. We then transform the font-definition to one that is used by thelocalprovider, and the files get served to users from the same site and not from Google's servers.This effectively eliminates the privacy/GDPR concerns, and at the same time improves performance since all requests come from the same domain. There is only a performance hit the 1st time the webfont needs to be downloaded, but all subsequent loads are instant. However, that penalty is mitigated by the fact that a server can connect and download webfonts from the Google API far faster than a normal residential connection, so even that 1st load is not that bad considering that the alternative is the user getting the fonts client-side with all the implications that follow.
Testing Instructions
Adding a webfont from
theme.json:Add to
settings.typography.fontFamiliesthis:The above will download ALL font-weights ranging from 100 to 900, both normal and italic, so it's a good example of a poorly-defined and bad request which will download a lot of redundant files.
The font-family should be available in the editor and properly rendered both in the editor and the frontend (you can select the font-family in a button to test).
Adding a webfont from PHP:
The font-family should be available in the editor and properly rendered both in the editor and the frontend (you can select the font-family in a button to test).