HTML5 and CSS【01】Font

1.Import a Google Font

Now, let's import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).

First, you'll need to make a call to Google to grab the Lobster font and load it into your HTML.

Copy the following code snippet and paste it into the top of your code editor:

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

Now you can set Lobster as a font-family value on your h2 element.

Apply the font-family of Lobster to your h2 element.

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  p{
    font-size: 16px;
    font-family: Monospace;
  }
  h2{
    font-family:Lobster;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your 
ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe,
 shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

2.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;
}