Font Squirrel Front Page

Custom Fonts

Delayed For Now

A much-needed and anticipated update to the way that WP handles web fonts has been delayed from inclusion the 5.9 release. This is one of many god reasons to figure out how to add your own custom fonts to WordPress.

Currently, no standard specifically relates to web fonts in WordPress. Theme authors piggyback off existing functions for enqueueing a third-party stylesheet or a custom one with @font-face rules. That has generally been an accepted practice in the theme author community over the years.

However, I’ve been hacking away at the new Twenty Twenty-Two ‘block-based’ template, and this current site design is the ongoing result of this experimentation.

It may be the case that you have been using plugins to achieve your custom fonts, but it seems that these are also having issue with the update. Self hosting is the most flexible way to get this done.

Custom CSS

As you can see, I’m using two custom fonts here, self-hosted – I found them using fontsquirrel – and they’re loaded with the child theme locally via CSS.

Another important reason for handling fonts this way going forward is that Google no longer caches fonts between sites. Add to this the extra load time required for using a dependancy type web-font library, it makes sense to use @font-face with self-hosted fonts as the ideal all-round creative & technical solution.

I got all my inspiration on this topic from Kevin Powell’s channel here below. It’s a fantastic CSS resource!