Self-Hosting Google Fonts in a Block Theme

Previously, we covered How to Add Google Fonts to Block Themes. This method allowed the font to be hosted on Google’s services. This is one of a few methods in which you can include a font in your theme. 

Recently, there has been discussion of a unique case where legal implications have arisen from leveraging externally hosted Google fonts. This has led the WordPress.org Themes Team to revisit and consider modifications to their policies. The current Theme Team recommendations suggest that it is best to self host your font files and include them within your theme. This helps avoid the potential for any further GDPR friction in the future.

Digging deeper on self hosting fonts

Let’s dig in on some commons considerations of what some of the benefits and drawbacks are to self hosting fonts.

Performance considerations

The myth of hosting through Google’s services to leverage their CDN’s caching capabilities has been debunked for a few years. Since most browsers started implementing cache partitioning, which requires a font to be re-downloaded for each site. Therefore, assuming that the font is cached in the user’s browser after visiting one site with the same font may not be a valid approach.

There are further nuances, and mileage may vary depending on features, like: whether your site is using a Content Delivery Network (CDN) and HTTP/2, which are both built into WP Engine’s infrastructure.

Similarly, it is recommended to leverage techniques like subsetting, proper font format choices (.woff2 is often smallest) and prioritizing local() user system fonts to offer optimal experiences for your users.

Stability and security considerations

Should Google’s services encounter downtime then the fonts would not be accessible. Whereas, you only have to worry about your own server’s uptime if you self host your fonts.

Also, you do not have to worry about Google monitoring and possibly storing your user’s IP addresses, which is where most GDPR compliance and privacy concerns begin.

Maintenance and feature parity

One drawback is feature parity. If a font is updated with new features (different language support, added styles, glyphs) then you might not have the latest release. However, this seems to be a small drawback for most site builders.

Webfonts API soft launch in WordPress 6.0

Since the release of WordPress 6.0 block themes can include fonts directly in the theme.json file. This was mostly spurred by the necessity for the new default TwentyTwentyTwo theme’s need to leverage and introduce the use of style variations.

There is a long road ahead for a full featured Webfonts API and some progress is being made for the upcoming WordPress 6.1 release.

Revisiting font usage in block themes

With all these factors it was deemed necessary to convert the Frost theme to use self hosted fonts recently. Here is how we did it in the theme.json

{
	"version": 2,
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": "Outfit, sans-serif",
					"name": "Outfit",
					"slug": "primary",
					"fontFace": [
						{
							"fontDisplay": "block",
							"fontFamily": "Outfit",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "100 900",
							"src": [ "file:./assets/fonts/Outfit-Variable.woff2" ]
						}
					]
				},
				{
					"fontFamily": "monospace",
					"name": "Monospace",
					"slug": "monospace"
				}
			]
		}
	}
}
Code language: JSON / JSON with Comments (json)

A few things to note about leveraging this technique:

• You should be utilzing the latest "version": 2 of theme.json
• Be sure to point the "src": [] to _your_ font in your theme.
• Be sure to include a copy of the SIL Open Font License associated with your font if you plan on submitting it to the WordPress.org theme repository. It should ideally be included in a License.txt alongside your font, as well as referenced in your theme’s readme.txt.

Full examples of these methods can be found in Frost and the TwentyTwentyTwo theme.

Until next time

Font choices are crucial to conveying your brand’s tone through style. Ultimately, offering a great and fast reading experience for your user’s is the end game. ✌️