Why You Still Need to Use a Font Stack with Web Fonts

The new content block for iOS9 proves why font stacks are still critical

Wood blocks
Wood blocks.

Web fonts have brought an incredible variety to the typographic design used on websites. By being able to use fonts that are not necessarily found on a person’s computer, either by including those fonts files on your site with @font-face or by using a 3rd party service and linking to their fonts, web designers have been able to expand far past the handful of “web safe” options that were used for many years.

Because these web font files are being linked to, the worry that a font will not be found on a person’s computer, and therefore not shown on the website, goes away. This may make it seem like font stacks are no longer necessary in your site’s CSS, but that could not be further from the truth. There are a number of reasons why a web font may still fail, including the recent release of content blocker software for iOS9 that allows people to block all external font files.

Content Blocking

The Internet can be a very frustrating place. Intrusive advertising, trackers, and social feeds can all get in your way and slow down your browsing experience. These problems have fueled the rise of a number of different “blocking” software solutions.Some of these blocker include a feature that allows users to “Block External Fonts”. If this is done, you web fonts will not load, and if you do not have a font stack specified, you could be in trouble.

The reality is that loading fonts, either from your site files or from another service/site, slows your page’s loading time. Eliminating the loading of those fonts can increase page speed, but it can also destroy the look of a webpage if a proper font stack has not been specified.

Other Failures

Content blocking is not the only way that web fonts could fail.

A 3rd party service may be unavailable for a period of time, which could mean that your linked fonts will not be shown and your font stack will need to take over.

Fonts that you include with your other site files (images, scripts, etc.) can also fail to load. A misspelled font name, incorrect link, or a problem during the transmission of a file are all possible reasons why a font may not load in the browser. I have also seen certain browsers (Mozilla Firefox) block a font file that it thought was coming from a different domain, when in reality is was the same URL but without the “www” subdomain added.

In each of these cases, a web font will not load, which means that a font stack is required or you leave your site’s font selection at the mercy of the browser.

The Importance of Testing

Understanding the importance of font stacks and using them always, even with web fonts, is a great first step, but you also need to test your site with those stacked fonts in place of your primary choice. Too often web designers add fonts to their stacks, but do not actually test their pages with those fonts being used. This is taking a big chance, because in some case those substituted fonts could significantly change the look of a site or, even worse, break its carefully constructed layout.

The bottom line is that if fonts specified in a stack are being used on a webpage, something has gone wrong. The fonts that you wanted to use are not being shown and a replacement has taken over. You cannot expect perfection in this situation, but by testing your stacks in advance, you can at least ensure that if your fonts do fail, your site will still be readable so that it communicates and functions effectively for your visitors.

Edited by Jeremy Girard on 1/27/17

Format
mla apa chicago
Your Citation
Girard, Jeremy. "Why You Still Need to Use a Font Stack with Web Fonts." ThoughtCo, Jan. 27, 2017, thoughtco.com/use-font-stack-with-web-fonts-3470015. Girard, Jeremy. (2017, January 27). Why You Still Need to Use a Font Stack with Web Fonts. Retrieved from https://www.thoughtco.com/use-font-stack-with-web-fonts-3470015 Girard, Jeremy. "Why You Still Need to Use a Font Stack with Web Fonts." ThoughtCo. https://www.thoughtco.com/use-font-stack-with-web-fonts-3470015 (accessed November 22, 2017).