Specify How Fonts Should Degrade If Have Lobster Font

HTML-CSS
1

Tell us what’s happening:

How can I pass this if my browser has Lobster since thats what the Note says" Note
If you have the Lobster font installed on your computer, you won’t see the degradation because your browser is able to find the font."

Your code so far


<!--link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"-->
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster;monospace;
  }

  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 (Windows NT 10.0; Win64; x64; rv:69.0) Gecko/20100101 Firefox/69.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/specify-how-fonts-should-degrade

2

You had a typo here. It should be font-family: Lobster, monospace;
Then your code passes.

You can make up a font that doesn’t exists to see the degradation, like:

font-family: FantasiaMadeUpFont, monospace;
3

You have a mistake here:
font-family: Lobster;monospace;.
Should be so:
font-family:Lobster, monospace;
If you have installed Lobster on your computer and you want to see monospace you can comment link with Lobster import above and write so:
font-family:/*Lobster,*/ monospace;

1 Like
4

Thanks that was it , phew!