FCC Challenge 15: Specify How Fonts Should Degrade

In Free Code Camp Challenge 15 we’re specifying multiple fonts in case the preferred font (left-most) is not available. The browser should fallback to the next available font specified to the right:

[css]

CatPhotoApp

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

The modified code should look like:

[css]

<!––>

CatPhotoApp

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

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:

[css]

p {

font-family: Helvetica, Sans-Serif;

}

[/css]

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