In today's article, I'm going to talk to you about font optimization for speed optimization—making your website faster, improving user experience, getting a better Google PageSpeed Insights score, enhancing your SEO, and overall creating a faster, better website.
In addition to the things we've talked about in our series—like image optimization, using a CDN, and compressing files—one thing you can do is focus on font optimization.
This article is a bit more technical than most of our other speed optimization content. We're not going to go too crazy, but it is a little more in-depth. If you're not sure about some of the steps, it's still good to follow along, but you can always pass this on to a developer. These are basic concepts, but they do involve a bit of code. I want to explain the best practices based on Google's recommendations, focusing on the most important ones you can consider implementing.
Understanding Font Loading
When you load a webpage—like the demo site we've used in many of our videos—it often downloads fonts. It might have multiple fonts and multiple styles. A font might have a specific typeface, and styles like bold, extra bold, italic, and so on. Different fonts have different styles, and sometimes you have to download more than one file to get what you want.
Most of the fonts people use aren't the default OS fonts that come with Windows or Mac. They're often downloaded from sources like Google Fonts and loaded onto the website. This takes time to load and display on the page, which slows down your website and negatively impacts your PageSpeed Insights score.
What You Can Do
1. Use Fewer Fonts and Styles
The first thing you can do is use fewer fonts. Many websites use multiple fonts and multiple styles—for example, bold, extra bold, thin, and so on. If you reduce the number of fonts and styles, your site will load faster because there's less to download. It's a simple but effective step.
2. Self-Host Fonts
When you download fonts, many websites use external sources like Google Fonts, meaning you have to download them from Google's servers. Sometimes Google's servers can be slower or faster; it varies.
One thing you can do is download the font and upload it to your own site, allowing your server to provide it to the browser. On paper, hosting fonts on your own server can be faster and more consistent because you don't have to rely on external servers. You should experiment with this—try embedding the font versus self-hosting it. In general, I prefer self-hosting, but it's up to you.
3. Use Preconnect
If you decide to continue using external fonts like Google Fonts, you can specify a preconnect. This tells the browser to prepare the connection to download the font when the CSS requests it. For example, you can preconnect to fonts.googleapis.com or fonts.gstatic.com. This helps speed up things a bit more.
If you're hosting fonts on your own site, you don't need to preconnect. But if you're using different hosting—like GitHub or Google Fonts—you should use preconnect.
4. Use the WOFF2 Format
When you get fonts, there are different file types—just like images have JPEG and PNG. In general, WOFF2 is the newest and best format, offering the best compression. It typically downloads and displays on your website faster than others. So if there's a WOFF2 version of the font, you should use that.
5. Use font-display: swap
When a page loads, it takes a little time for the font to download and display. You can specify a CSS property called font-display: swap. When you do that, the browser won't block rendering the text while the font is loading. Instead, it will show the text using a default font, and as soon as your custom font downloads, it will swap it in.
If you don't use swap, you might not see any text until the font is downloaded, which can make your site seem slower. Using swap is the best practice, and you should use it whenever you're using external fonts—which most websites do.
