Use an h2 CSS selector to change the font. Import Google Font

Tell us what’s happening:

Your code so far


<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, "Open Sans";
  }

  h2 {
    font-family: Lobster, "Open Sans";
  }

</style>
<h2 class="red-text lobster">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 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

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

should rather be :

h2 {
    font-family: Lobster;
  }

Cheers!

2 Likes

Hi,
in the challenge https://learn.freecodecamp.org/responsive-web-design/basic-css/import-a-google-font, you just have to add an h2 css element with no degrade font. So just delete your “open sans” font in your css.

2 Likes

thanks :slightly_smiling_face:

Thanks. I did a similar thing.

Kind of annoying that a “correct” answer isn’t accepted , but I guess there are limitations to the system’s automated code-correction mechanisms.

Still. the fact that the lesson explicitly discusses the potential value of including a fallback font, it seems unfortunate that the system then punishes a student (or at least confuses a student) for giving this a whirl.

.red-text { color: red; } h2 { font-family: Lobster; }

p
{
font-family: “monospace”;
}

CatPhotoApp

Click here to view more cat photos.

A cute orange cat lying on its back.

Things cats love:

  • cat nip
  • laser pointers
  • lasagna

Top 3 things cats hate:

  1. flea treatment
  2. thunder
  3. other cats
Indoor Outdoor
Loving Lazy Energetic
Submit

I’ve done it this way and it still doesn’t work. I don’t have a clue about what I’m doing wrong. I’ve tried it every way that I can think of. Aggravating.

I found my mistake…I didn’t close my brackets on the css rule above this declaration…pretty stupid.

There is also another issue here where if you dont use a semicolon at the end it won’t go through. The last css rule within style brackets should work fine without semicolon.

As far as I can tell I’ve entered the code correctly. My CatPhotoApp text has changed to the new font.

However, it won’t let me progress when I run the tests it says “use a h2 selector to change the font”

Anyone else getting this issue? My code below. Please let me know if you spot anything wrong:

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

1 Like

Please ignore the above. I found the answer. It had specified the font size too. The test don’t let you pass with the font size specified. Once I removed I was able to move on to the next task.

3 Likes

Hello,
I have the same problem, I have added the h2 selector in the css correctly, it works on display but the system just won’t let me pass to the next lesson !

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

Edit : The mistake was a space left between the family-name":" and the points lol

3 Likes

you should remove the class h2 red-text and live it like that

h2 {

font-family: Lobster;

}

catphotoapp

man, just click “Get a hint” it comes up with the solution.

they must have realised that we can’t get it at the level that they have tought us at this time period.

Thanks man it works am good to go

yeah, thanks a lot @BrownieX.
I had font size in comment and did not allowed me to proceed

Thank you mate it was just a space like you said …

hahaha what’s that me too i haved same problem it’s just a space but why css complecate this style :expressionless: :expressionless: :expressionless: :sleepy: i’m tired because this big :joy:mistake