Specifying a Series of Font Families with CSS font-family Property

The Syntax of the font-family Property

arial
Arial. © 2013 J Kyrnin - licensed to About.com

Typographic design is a critically important piece of a successful website design. Creating sites with text that is easy to read and which looks great is the goals of every web design professional. To achieve this, you will need to be able to set the specific fonts that you wish to use on your webpages. To specify the typeface or font family on your Web documents you will use the font-family style property in your CSS.

The simplest font-family style that you could use would include just one font family:

p {
  font-family: Arial;
}

If you applied this style to a page, all of the paragraphs would be displayed in the "Arial" font family. This is great and since "Arial" is what is known as a "web-safe font", which means most (if not all) computer would have it installed, you can rest pretty easily knowing that your page will display in the intended font.

So what happens if the font you select can not be found? For example, if you do not use a "web safe font" on a page, what does the user agent do if they don't have that font? They make a substitution.

This can result in some very funny looking pages. I once went to a page where my computer displayed it completely in "Wingdings" (an icon-set) because my computer didn't have the font that the developer had specified, and my browser made a very poor choice in what font it would use as a replacement.

The page was completely unreadable for me! This is where a font stack comes into play.

Separate Multiple Font Families with a Comma in a Font Stack

A "font stack" is a list of fonts that you want your page to use. You would put your font choices in order of your preference and separate each with a comma.

If the browser doesn't have the first font family on the list, it will try the second and then the third and so on until it finds one it has on the system.

font-family: Pussycat, Algerian, Broadway;

In the above example, the browser will first look for the "Pussycat" font, then "Algerian" then "Broadway" if none of the other fonts were found. This gives you more of a chance that at least one of your chosen fonts will be used. It is not perfect, which is why we have yet more we can add to our font stack (read on!).

Use Generic Fonts Last

So you can create a font stack with a list of fonts and still have none of which the browser can find. You obviously don't want your page to show up unreadable if the browser makes a poor substituion choice. Luckily CSS has a solution for this too: generic fonts.

You should always end your font list (even if it's a list of one family or only web safe fonts) with a generic font. There are five that you can use:

  • cursive
  • fantasy
  • monospace
  • sans-serif
  • serif

The two above examples might be changed to:

font-family: Arial, sans-serif;
font-family: Pussycat, Algerian, Broadway, fantasy;

Some Font Family Names are Two or More Words

If the font family you want to use is more than one word, then you should surround it with double-quote marks.

While some browsers can read font families without the quotation marks, there may be problems if the whitespace is condensed or ignored.

font-family: "Times New Roman", serif;

In this example, you can see that the font name "Times New Roman", which is multi-word, is encased in quotes. This tells the browser that all three of these words are part of that font name, as opposed to three different fonts all with one word names.

Original article by Jennifer Krynin. Edited on 12/2/16 by Jeremy Girard