What Is a "Font Stack"?

Wooden type letters
Wooden type letters.

Typographic design is an important part of website design. While images get much of the love with sites, it is the written word that appeals to search engines and carries forth the content of most sites. With the importance of that text comes the need to ensure that it looks good and is easy to read. This is done with CSS styling.

When you dictate the look of a website's text content, you will do so using CSS or Cascading Style Sheets.

For instance, if you wanted to set the font of a page to "Arial", you could do so like this:

body {
  font-family: Arial;
}

Because this font is set for the "body", the CSS cascade will apply the style to all the other element of the page 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. 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 separate the different font names with a comma. 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.

Notice also that the second font in the stack, 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 is 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.

Font Stacks and Web Fonts

Many websites today use web fonts that are either included on the site along with other resources (images, Javascript, 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.