freeCodeCamp Challenge Guide: Import a Google Font

Guide
1

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

13 Likes
2

I still don’t understand

6 Likes
3

Please create a new topic when you have a question.

4 Likes
4

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

8 Likes
5

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

5 Likes
6

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

6 Likes
7
.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.

10 Likes
8

Yeah I figured it out thanks though!:grinning:

3 Likes
9

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

5 Likes
10

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

8 Likes
11

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
12
.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.

5 Likes
13

[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
14

doesnt work either even with everything included :[

1 Like
15

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

1 Like
16

thanks for the code its really working

1 Like
17

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

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

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

5 Likes
19

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
20
.red-text { color: red; } h2{ font-size:16px; font-family:Lobster; } p { font-size: 16px; font-family: Monospace; }
2 Likes