Import a Google Font with h2 selector for Lobster

HTML-CSS
1

I was supposed to use the h2 selector to change my font to Lobster. I wrote the code below, but it didn’t allow me to pass…however, later I cut and pasted the h2 selector above the p selector and it passed me. Any ideas why?
Thanks.

Your code so far


<style>
  .red-text {
    color: red;
  }

  p {
    font-size: 16px;
    font-family: monospace;
  }
  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
h2 {
  font-family: Lobster;
}
</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>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.62 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/import-a-google-font/

2

I think the problem is because the link tag with your font should be positioned outside of the style tag in your html, as instructed a bit further up in that lesson. Here is the link to Google’s documentation, as well. Once you have the link outside of the style tag, it shouldn’t matter in this particular example which order the h2 and the p styles are in.

Hope this helps!

1 Like
3

Thx! I need to read the instructions a bit more carefully.

4

Please help.
I cant seem to change the font with the H2 selector

here is my code:

<link rel="stylesheet"href="https://fonts.googleapis.com/css?family=Lobster" type="text/css">
<style>
  .red-text {
    color: red;
  }
h2{
  font-family: "Open Sans",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>
5

Go back and review the lesson again and remember that the “C” in CSS stands for cascading.
You have a very simple typo.

6

This is crazy.
I can design websites and put things together, but im not seeing this.
I understand that css is cascading so it should apply to my H2,
so the only way to override the css is with inline styles.

7

No, no, no. Sorry, that was definitely a poor choice of wording on my part.

Reread this part of the lesson;

Now you can use the Lobster font in your CSS by using Lobster as the FAMILY_NAME as in the following example:
font-family: FAMILY_NAME, GENERIC_NAME;.

and then look at they way you have the fonts coded in.

8

Ok so I have switched around the value and attribute, ie
h2{
font-family: Lobster, “Open Sans”;
}

but it hasnt made ant difference.

9

I used a hint, so fingers crossed.

10

Pretty close!

Looks like the challenge doesn’t want a fallback value. So you can simply get rid of “Open Sans”.

11

Hi thats what i found in the end, but it wasnt really clear in the question.
I am a freelance web developer, but I feel that I need to refresh on my skills before I take a junior position.
I can put things together and make things work, but i need a deeper understanding, HTML and css are fine, its CSS3 and then Javascript i want to conquer.
I have a CIW qualification, but its not really recognized, so I am preparing for my Microsoft exam which requires me to know Javascript.
exam 70-480 which is more recognizable.

12

now the strong tag doesnt work?!!

 <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong> Stanford University.</strong></p>
    </div>
13

Hi Luke.

Go head and create another post since your question isn’t relevant to this topic.

Make sure to add a link to the exercise.

14

i am working on the exercises, i thought it would be?