Web Font Performance – How Your Fonts Affect Page Speed

For many of us, typography is as big of a decision as anything else in the design process of a website. Choosing the perfect font family, making sure we’re using the right font weight. We want our font to be an extension of the design, as well as make our content pleasing to the eye, drawing our readers interest. But what about our web font’s performance?

Unfortunately, there is typically much less thought put into the performance cost of using the amazing third-party font you downloaded. Because of this, your visitors may be experiencing slow loading times, or worse: the dreaded “Flash of Unstyled Text” (FOUT). Considering web font performance is something that should become a habit of yours.

Fear not. We are going to walk through the steps you can take when deciding wether or not a web font is for you. Should you decide that it’s a necessary addition to your site, we’ll discuss proper optimization and implementation.

Web Fonts vs. System Fonts

Before we get into selecting the correct web font and how to make sure it doesn’t affect the load time of your site, we need to first ask a question of ourselves. Do I really need to use a custom web font? Or will a system font that’s already loaded in the browser suffice?

David Gilbertson and the guys at Hackernoon have a great article and flowchart that will help you decide whether or not you really need to load a web font for your site. In short, if a web font doesn’t directly represent your brand, or somehow make your content easier to read, you likely don’t need it.

The great thing about system fonts, is that they are already included on most devices. This means they don’t need to be downloaded to the visitor’s computer when they visit your site. This saves them bandwidth and lowers the number of requests necessary to load your site. We’ll list some of the fonts below that are available on most systems, though this is by no means an exhaustive list. Beyond that, there is a reason that these fonts are used for billions of words in books and documents – their readability and quality.

Web Safe Fonts (System Fonts)

• Arial
• Calibri
• Helvetica
• Verdana
• Courier
• Georgia
• Palatino
• Times New Roman

The bottom line is that it’s important to ask yourself why you need to use a web font. Would your visitors would notice a difference if you went with a system font instead? Chances are, when you compare the web font you are thinking of using with a comparable system font, the difference will be difficult to see. Many times, the reason we find ourselves looking to replace the system font is simply… because we can.

Different Font Types – TTF, WOFF, WOFF2, SVG.

If you’ve decided that you do need a special web font for your site, you may have been confused by all of the different file types that go along with downloading a font. Likely you’ve seen TTF, WOFF, WOFF2, SVG, and some others. While there is unfortunately no one font type that works on each and every browser, we can get close, and provide fallback options to cover edge cases.

TTF – While it is compatible with nearly all browsers, TrueType Fonts are not compressed, and subsequently have a larger file size. These are rarely a good option.

SVG – Scalable Vector Graphics fonts can safely be ignored. They are buggy and have been removed from every browser except Safari, and are far from the best option even in that browser. (Don’t confuse these with SVG images, which are popular and commonly supported).

WOFF – Now we’re talking. The Web Open Font Format is the product of collaboration by Opera, Microsoft, and Mozilla and is a World Wide Web Consortium Recommendation. It offers compression and is supported by 98% of browsers. This is the font format you’ll want to serve to visitors as your fallback in most cases. Why the fallback and not the primary option?

WOFF2 – This is why. WOFF2 is the next generation of WOFF, and offers a 30% compression advantage over the original. For a while, it didn’t have widespread browser support. However, it not enjoys support from every major browser (94%), with IE and Opera Mini being the only holdouts. Use it wherever possible for the best performance.

Using Google’s Font API

Google Font API is a web service that supports open source font files that can be used for your web designs. Their ever-growing font collection is easily accessible by going to https://fonts.google.com/. If the sections above were overwhelming, Google’s API is a great resource, as it handles a lot of the grunt work for you.

After selecting a font, you’ll be able to make selections customizing the font weights. Only select what you need. Google even offers a handy indicator in the top right, letting you know how much your selections are affecting web font performance.

The API makes it very simple to use @font-face CSS coding. In addition, it can handle a lot of the fallback options for you, so that you don’t need to worry about what browsers you’re serving to.

Icon Fonts vs. Small Images

What about icons? When should you use icon fonts, from a service like https://fontawesome.com/, and when should you use icon images?

In regards to performance, the answer is it depends. Typically if you’re just showing 1-2 icons, (such as a thumbs up and a thumbs down) then it’s going to use less bandwidth to just load those as images. However, if you’re utilizing many icons throughout the page, a icon font may be more efficient. Try this out and see the difference – you may find that the icon font you wanted to use is more compact that images. They’re all different and you should test both options.

If you’re still undecided, or they have similar performance costs, then consider aesthetics. Icon images are going to be the choice if you need a multi-color icon, as fonts will be a single color. Images also give stable results regardless of the browser. If you’ve ever used Font Awesome and saw a square (or nothing) instead of your icon, you’ve seen what can happen if things aren’t set up properly.

On the other hand, icon fonts can be resized and recolored with simple CSS, and don’t suffer any resolution drawbacks as a result. A font will look great regardless of the device, screen size, or pixel density. They can also be easily cached to improve load times.

Web Font Performance Tips

All of this is not to say that no one should ever use web fonts. However, there is a correct way to do it. Keeping web font performance in mind, you can spare yourself a lot of stress.

The reason that web fonts can cause slower loading times and FOUT, is that often times the browser only becomes aware that it needs to load your font after it’s already loaded the HTML and CSS files. This is obviously less than ideal.

However, by using rel=preload, you can tell the browser right away that it’s going to need to download your font. That looks more like this.

Much better. Preload currently enjoys about 85% support, so it’s not completely universal. However, there are alternatives. You can also use the FontFace API, which offers a higher amount of compatibility. Even better, the support for WOFF2, the best option that we went over earlier, is almost identical.

Summary

Our point here is not that web fonts should never be used. Rather, it’s important to look at why you’re using the web font. If it’s not important to your brand, and doesn’t serve any other purpose, a system font is the better option.

If you’re set on using a third-party font, there are simple steps you can take to ensure that it doesn’t negatively affect your web performance. Now, your site can take advantage of that gorgeous typography. Give your visitors a beautiful and performant experience!