What Is a "Font Stack"?

Wooden type letters
Wooden type letters.

While images get much of the love when it come to websites, it is the written word that appeals to search engines and carries forth the content of most sites. As such, typographic design is a critically important part of website design. With the importance of a site's text comes the need to ensure that it looks good and is easy to read. This is done with CSS (Cascading Style Sheets) styling.

Following modern web design standard, when you want to dictate the look of a website's text content, you will do so using CSS.

This separates that CSS style from the HTML structure of a page. As an example, if you wanted to set the font of a page to "Arial", you could do so by adding the following style rule to your CSS (note - this would likely be done in an external CSS style sheet that powers the styles for every page on the website):

body {
 font-family: Arial;
}

This font is set for the "body", so the CSS cascade will apply the style to all the other elements of the page. This is because every other HTML element is a child of the "body" element, CSS styles like font family or color will cascade from the parent to the child element.  This will be the case unless a more specific style is added for certain elements. The only problem with this CSS is that only a single font is specified. If that font cannot be found for some reason, the browser will substitute another in its place. This is bad because you have no control over what font is used - the browser will choose for you, and you may not like what it decided to use!

That is where a font stack comes in.

A font stack is a list of fonts in the CSS font-family declaration. The fonts are listed in order of preference that you would like them to appear on the site in case of a problem like a font not loading.  A font stack allows a designer to control the look of the fonts on the web page even if the computer doesn't have the initial font that you called for.

So how does a font stack look? Here is an example:

body {
 font-family: Georgia, "Times New Roman", serif;
}

There are a few things to notice here.

First, you will see that we separated the different font names with a comma. between each one You can add as many fonts as you'd like, as long as they are separated by a comma. The browser will try to load the first font specified first. If that fails, it will run down the line trying each font until it finds one that it can use. In this example we are using web safe fonts, and "Georgia" will likely be found on the person's computer who is visiting the site (note - the browser looks on your computer for the fonts specified on the page, so the site is actually telling the computer which fonts to load from your system). If for some reason that font was not found, it would move down the stack and try the next font specified.

In terms of that next font, notice how it is written in the stack. The name of "Times New Roman", is encased in double quotes. This is because the font name has multiple words. Any fonts names with more than one word (Trebuchet MS, Courier New, etc.) must have the name in double quotes so that the browser knows that all of those words are part of one font name.

Finally, we end the font stack with "serif", which is a generic font classification. In the unlikely instance that none of the fonts you have named in your stack are available, the browser will instead just find a font that at least falls into the proper classification that you have chosen. For instance, if you are using sans-serif fonts like Arial and Verdana, than ending a font stack with the classification of "sans-serif" will at least keep the font in that overall family if there is a load problem.  Admittedly, it should be very rare that a browser cannot find any of the fonts listed in the stack and have to instead use this generic classification, it is a best practice to include it anyway just to be doubly safe.

Font Stacks and Web Fonts

Many websites today use web fonts that are either included on the site along with other resources (like the site's images, Javascript file, etc.) or linked to at an offsite font location like Google Fonts or Typekit.

While these fonts should load since you are linking to the files themselves, you still want to use a font stack to ensure that you have some control over any issues that may arise. The same thing goes for "web safe" fonts that should be on someone's computer (note that the fonts we have used as examples in this article, including Arial, Verdana, Georgia, and Times New Roman, are all web safe fonts that should be on a person's computer).  Even though the likelihood of a font being missing is very low, specifying a font stack will help bulletproof a site's typographic design as much as possible.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 8/9/17