Lesson: HTML5 and CSS

Specify How Fonts Should Degrade

There are several default fonts that are available in all browsers. These include Monospace, Serif and Sans-Serif

When one font isn't available, you can tell the browser to "degrade" to another font.

For example, if you wanted an element to use the Helvetica font, but also degrade to the Sans-Serif font when Helvetica wasn't available, you could use this CSS style:

p {
  font-family: Helvetica, Sans-Serif;
}

Now comment out your call to Google Fonts, so that the Lobster font isn't available. Notice how it degrades to the Monospace font.

Note
If you have the Lobster font installed on your computer, you wont see the degradation because your browser is able to find the font.

---