Import a Google Font - CodeCamp bug or silly mistake?

Import a Google Font - CodeCamp bug or silly mistake?
0

#1

Tell us what’s happening:

I’m not sure this is a problem with my code so much as a bug in the freeCodeCamp system? It insists that I have failed to provide a css selector to set the h2 tag to use the Lobster font-family, but the selector is clearly there as in:

h2 {
font-family: Lobster
}

The “link” tag also preceeds the style tag just as it is supposed to. Most baffling is the fact that the Lobster font actually shows up on the h2-tagged text in the example window… yet, nonetheless, I am prevented from completing the lesson.

Am I being stupid and missing something obvious? Or did freeCodeCamp accidentally tie its own shoelaces together on this one?

Your code so far


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

<style>


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

  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>

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

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


#2

You are missing a semicolon here.


#3

Aw geez, thanks a lot for making me look like an idiot, aditya. :flushed:

Nah, obviously I just did that to myself. Clearly I should look my code over just a tiny bit more thoroughly before runnig to the forum to beg for help.

(I guess this is one of the tricky things about learning html. I have plenty of experience coding in actual programming languages and have come to rely on compiler errors enforcing stubborn syntax requirements. Since html tries to “make things work” even when you screw up, its easy to assume you’ve done everything right when you may not have)


#4

You are no way an idiot @timetherewere, if you are learning something new and have questions, you should ask for help and that is the most effective way of learning.
Not asking questions would have surely made you an idiot.
All the best for future challenges :+1: