Learn
CSS Typography
Fallback Fonts

What happens when a stylesheet requires a font that is not installed on a user’s computer? Most computers have a small set of typefaces pre-installed. This small set includes serif fonts like Times New Roman and sans-serif fonts like Arial.

These pre-installed fonts serve as fallback fonts if the stylesheet specifies a font which is not installed on a user’s computer.

To use fallback fonts, the following syntax is required:

h1 { font-family: "Garamond", "Times", serif; }

The CSS rule above says:

  1. Use the Garamond font for all <h1> elements on the web page.
  2. If Garamond is not available, use the Times font.
  3. If Garamond and Times are not available, use any serif font pre-installed on the user’s computer.

The fonts specified after Garamond are the fallback fonts (Times, serif). Fallback fonts help ensure a consistent experience for the diverse audience of users that visit a site.

Instructions

1.

Below the banner, the web page is made of three main font sections, Serif, Sans-Serif and Monospace. Each of these sections shows an example font, Garamond, Helvetica, and Space Mono, respectively.

We’ll focus on styling the Garamond section here. In style.css, in the “Font Card” section, create the selector .garamond .sample .text.

2.

Using the selector you just created, set the font to Garamond and add serif as a fallback font.

3.

In style.css, below the last selector you made, create the selector .helvetica .sample .text.

4.

Using the selector you just created, set the font to Helvetica and add sans-serif as a fallback font.

Folder Icon

Take this course for free

Already have an account?