Skip to content

Conversation

@aristath
Copy link
Member

What?

This PR adds a provider for Google Fonts to the Webfonts API.

Why?

  • Since google-fonts is the only widely available, free API which provides open-source fonts, it would make sense to include it in Core. It is also the single API that everyone is using for webfonts in hundreds of themes.
  • The problem with all existing implementations is that they don't respect the user's privacy as decided by a European court recently. This implementation solves privacy/GDPR issues
  • Allow using google-fonts in countries that otherwise block Google servers (for example China)
  • Improve performance for google-fonts
  • Most theme-developers and designers want to use a google-font. Instead of forcing them to download and bundle the webfonts in their themes, this provider will allow defining the fonts and then they get handled server-side.

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 the local provider, 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.fontFamilies this:

			"fontFamilies": [
				{
					"fontFamily": "Big Shoulders Display",
					"name": "Big Shoulders Display",
					"slug": "big-shoulders-display",
					"fontFace": [
						{
							"fontFamily": "Big Shoulders Display",
							"fontWeight": "100 900",
							"fontStyle": "normal",
							"provider": "google"
						},
						{
							"fontFamily": "Big Shoulders Display",
							"fontWeight": "100 900",
							"fontStyle": "italic",
							"provider": "google"
						}
					]
				}
			],

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:

wp_register_webfonts(
	[
		[
			'font-family'  => 'Satisfy',
			'font-weight'  => '400',
			'font-style'   => 'normal',
			'font-stretch' => 'normal',
			'provider'     => 'google',
		],
	]
);

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).

@aristath aristath force-pushed the add/webfonts-provider-google branch from ce35cae to c01584f Compare March 14, 2022 11:47
@aristath aristath marked this pull request as ready for review March 14, 2022 11:50
@aristath aristath added [Feature] Webfonts [Type] Feature New feature to highlight in changelogs. labels Mar 14, 2022
@aristath aristath requested a review from zaguiini March 14, 2022 12:01
@aristath aristath force-pushed the add/webfonts-provider-google branch from 97a0c1a to 240ed3e Compare March 15, 2022 08:11
@asterion
Copy link

👍🏿

@aristath
Copy link
Member Author

Since the fonts API went through some rather significant refactors and no longer resembles the structure it had when this PR was submitted, I'll go ahead and close this.

@aristath aristath closed this Sep 25, 2023
@johnbillion johnbillion deleted the add/webfonts-provider-google branch April 22, 2025 10:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Type] Feature New feature to highlight in changelogs.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants