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