Specify How Fonts Should Degrade

Degrading just means that if the font you have chosen for your site isn't available in the users browser, then the site will automatically switch to one that is.

monospace, serif, and sans-serif are available in all browsers, therefore, make good degrade choices.

Example:

p {
  font-family: Helvetica, sans-serif;
}

Challenge: To begin, apply the monospace font to the h2 element, so that it now has two fonts - Lobster and monospace.

In the last challenge, you imported the Lobster font using the link tag. Now comment out that import of the Lobster font (using the HTML comments you learned before) from Google Fonts so that it isn't available anymore. Notice how your h2 element degrades to the monospace font.

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

Last updated