freeCodeCamp Challenge Guide: Import a Google Font

Import a Google Font


Problem Explanation

The below example shows one of the ways in which you can import and use a Google Font.
The example uses a link to the font’s API, in the <head> of the HTML document rather than in the CSS.

To browse through other fonts offered by Google, please check Google Fonts

To look at what is going on behind a font, you can open the URL for the font.
We have used the Lobster font, click here to have a look at what’s going on under-the-hood for the Lobster font


Solutions

Solution 1 (Click to Show/Hide)
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
  .red-text {
    color: red;
  }
  h2 {
    font-family: Lobster;
  }
  p {
    font-size: 16px;
    font-family: monospace;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
  
  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
  
  <div>
    <p>Things cats love:</p>
    <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
    </ul>
    <p>Top 3 things cats hate:</p>
    <ol>
      <li>flea treatment</li>
      <li>thunder</li>
      <li>other cats</li>
    </ol>
  </div>
  
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <label><input type="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

Relevant Links

7 Likes

I still don’t understand

4 Likes

Please create a new topic when you have a question.

2 Likes

It’s still not working. every time, i include the link and run the programme, the p tag is losing its own font-family

3 Likes

Can someone show me the coding for this?Am i supposed to create an h2 element and insert font family exactly how we did it to the p element?Thanks

3 Likes

I put the link at the top but I’m not sure how to apply the family font to h2.

4 Likes
.red-text { color: red; }

p {
font-size: 16px;
font-family: Monospace;
}

h2 {
font-size: 16px;
font-family: Lobster; }

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.

6 Likes

Yeah I figured it out thanks though!:grinning:

2 Likes

This works 100%

.red-text { color: red; } h2{font-family:Lobster;} p { font-size: 16px; font-family: Monospace; }

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.

Thanking You
Shawn Alexander

3 Likes

-non of these that are shown above work for me? :[.

4 Likes

first of all u have to link it with the specific font family that u want to use and then u have to mention those specific font family property in your stylesheet.

2 Likes
.red-text { color: red; } h2 {font-family: Lobster; } p { font-size: 16px; font-family: Monospace; }

This is actually what the code should like before the style tags and the code in the style tags. If you do like this it will work.

1 Like

[quote=“susie2268, post:12, topic:18200”]
This is actually what the code should like before the style tags and the code in the style tags. If you do like this it will work.

.red-text { color: red; } h2 {font-family: Lobster; } p { font-size: 16px; font-family: Monospace; }
3 Likes

doesnt work either even with everything included :[

1 Like

That’s odd, it worked for me. Sorry if its not working out for you.

1 Like

thanks for the code its really working

1 Like

hey twizzer1030 where did u import that code
inside the style tags??? or somehhere else

1 Like
<h2 class="red-text"; style="font-family: Lobster";>CatPhotoApp</h2>

It doesn’t work! Why is that???

5 Likes

Try this one. It worked for me :slight_smile:

.red-text { color: red; } p { font-size: 16px; font-family: Monospace; } h2 { font-family: Lobster; }

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.

1 Like
.red-text { color: red; } h2{ font-size:16px; font-family:Lobster; } p { font-size: 16px; font-family: Monospace; }
2 Likes