What Is a "Font Stack"?

Close-Up Of Wooden Letters
Daniel Koszegi / EyeEm / Getty Images

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 in case of a problem, such as a font not loading. A font stack allows you to control the look of the fonts on the web page even if the site visitor's computer doesn't have the initial font that you called for.

Font Stack Syntax

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.

  • Font names are separated by commas. You can add as many fonts as you'd like, as long as they are separated by commas. The browser will try to load the first font specified. If that fails, it will run down the line trying each font until it finds one that it can use. This example uses web-safe fonts, and a site visitor's computer likely has the Georgia font. If not, the browser will move down the stack and try the next font specified.
  • Multiple-word font names are enclosed in quotation marks. Fonts such as Times New Roman, Trebuchet MS, Courier New, etc. require double quotes so the browser knows the words in each font name belong together.
  • A font stack usually ends with a generic font classification (serif or sans-serif). In this case, serif tells the browser to use a font that at least falls into this category if the specific fonts in the stack are unavailable. For example, if you are using sans-serif fonts such as Arial and Verdana, ending a font stack with the classification of sans-serif will ensure that, should a load problem occur, the font rendered at least will be in this category. This situation is increasingly rare, but it's best to include the generic font just to be safe.

    Font Stacks and Web Fonts

    Modern websites use web fonts that are either included on the site along with other resources such as images, Javascript files, etc. or linked to an offsite font repository such as Google Fonts or Typekit. Although these fonts should load without any problem, using a font stack ensures that you have some control over any issues that arise.

    The same thing goes for web-safe fonts; these reside on most computers by default. (The fonts in the example here are all web-safe.) Even though the likelihood of a font being missing is very low, specifying a font stack helps the site's typographic design render properly.

    CSS in Typographic Design

    Images get much of the love when it comes to websites, but it's the written word that search engines rely on. This makes typographic design critically important. With the importance of a site's text comes the need to ensure that it's appealing and easy to read. This is done with CSS (Cascading Style Sheets). In modern web design, CSS keeps the specs that govern a website's style separate from those that dictate its structure (HTML).

    Original article by Jennifer Krynin; edited by Jeremy Girard.