Basic CSS: Import a Google Font Marking Error

freeCodeCamp Support
1 
  h2 {
    font-family: Lobster, monospace;
  }

The above code is marked incorrect even though it is a valid option and is listed as best practice in 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;` .

The GENERIC_NAME is optional, and is a fallback font in case the other specified font is not available. This is covered in the next challenge.

Full Code Example:

<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>
2

It is not a mistake of yours, but a step ahead in the curriculum.

See this line:
The GENERIC_NAME is optional, and is a fallback font in case the other specified font is not available. This is covered in the next challenge.

Remove the GENERIC_NAME from your css and you should pass. :slight_smile:

1 Like
3

Yes, that will work to pass, but it is a logic or syntax error considering it is taught and told its optional.

Unless this line is meant to be read as “Do not allow fallback fonts.” where it says ensure.

Create a font-family CSS rule that uses the Lobster font, and ensure that it will be applied to your h2 element.
4

The fallback option is covered in the next lesson. I don’t think it’s an error.

Maybe the challenge text can be re-worded. I think your last statement is accurate. It should be read as “Don’t use a fallback font.”

1 Like
5

Thanks for your input! Your wording is better and I appreciate that you gave pass directions. I should have listed that in the original post. :slight_smile:

1 Like