CSS font degradation issue

Tell us what’s happening:

The first requirement in this problem is not being fulfilled, yet the initial font used for the h2 element is the Lobster font as requested. Everything is correct and I’ve been stuck here for a few days now.

Your h2 element should use the font Lobster – this is the problematic requirement.

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 (X11; Ubuntu; Linux x86_64; rv:67.0) Gecko/20100101 Firefox/67.0.

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

It looks to me like you are commenting out the link that brings in the lobster font the top.

^That is one of the requirements.

Comment out your call to Google for the Lobster font by putting <!-- in front of it.

Your code is passing for me (on both Firefox and Chrome). Try it on a different browser, like a chromium based browser. This might have something to do with Linux, not sure why this would be an issue which this challenge.

That is the part of the requirements unfortunately.

Thanks for the input… i’ll give it a shot.

I see I misunderstood the question then. Yes your solution is passing all tests for me as well on chrome.

TL;DR
That is the point of the exercise to show a font degrading properly. You add monospace, a generic font, so everyone can have the same visual context then simulate the font not being available by commenting it out. Linking to a web-font doesn’t always work.

Another application of this is beginner web developers that use font names from their OS and nothing else. All fonts are licensed Microsoft, Apple, Linux. Linux being open source was obviously left out. They had to create similar fonts to use for themselves, but they aren’t the same. Microsoft did create a set of basic office fonts licensed for non-windows OS so that Mac and Linux users can view Office documents in the proper font. That was many years ago and you’d have to google it to find it now, but I think it’s still available. My last new computer was 2015 and I was still able to get it.

Back to my beginner developer point, a linux user specified a linux only font in a weight only on linux. My system pick a replacement font that didn’t come in the specified weight. Had he said font-weight: bold; everything would have been ok. Bold starts at 400 and goes up. He says font-weight: 440, I can’t think of why 440, my replacement font was normal, 600, and 800. So, no bold for me.

Last there’s the case of the outdated or expensive to purchase font. Copperplate Gold was available for Mac OS 9. Mac OS X chooses Copperplate. The closest other systems have is serif. HUGE difference! When I see Copperplate Gold it reminds me of something centuries old hand-carved in England. Any other serif system font doesn’t work for me as an equivalent replacement, but at least I could attempt a replacement style.