The following excerpt is taken from Optimizing WordPress for Web Core Vitals. You can read the introduction to the guide here.
In the heady days of my youth, I spent hours debating the virtues of Times New Roman, Arial and Verdana. It was a simpler time, with three universally available web fonts.
Today, we have thousands of fonts at our fingertips – but they’re not all created equal when it comes to your site’s speed. First, I encourage you to use fonts from a top-tier provider, such as Google Fonts or Adobe Fonts (formerly Typekit). As you venture beyond those two, you’re more likely to encounter fonts that will slow down your site more than they spice up your design. Both Google and Adobe provide most of their fonts for free, and they’re generally well-optimized or able to be optimized with a few lines of code added by a developer.
Fonts contribute to your overall page time, and can also have a significant influence on several of the Core Web Vitals metrics. They can cause a layout shift, they can make your page take longer before it becomes interactive and they can slow you down in other ways that affect your score. When you’re working with your developer on font optimization, they should be able to set up your fonts to “swap” after they’ve loaded, but show a fallback font (such as trusty old Times New Roman) for the first second or two, ensuring that readers can still see your page in full while they’re waiting for the custom font.
There are other custom fonts out there that are used solely as icon sets. These are super cool and I love them for their ease of implementation, but they’re generally bad news for Core Web Vitals. If you’re using a font icon set, you should work with your developer to replace the icons with SVGs to avoid loading an additional and unnecessary font on your site.
