Basic CSS: Specify How Fonts Should Degrade, I keep getting error

Okay so when I run the test after I finish the lesson, I get an error saying “Your h2 element should use the font Lobster.” here is what I have:


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

  h2 {
    font-family: Lobster, monospace;
  }

  p {
    font-size: 16px;
    font-family: monospace;
  }
</style>

Where am I going wrong?

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

ah ok thank you very much!!

hello,
I’m not sure, but isn’t this exercise where you should use inline style?

If yes, then:
<tagname style="property:value;">

In your case:
<h2 style="font-family: Lobster, monospace;">text</h2>

Good luck

the line h2 is already in place all I have to do is add the “monospace” to the rest of the line so it can degrade to this font but it is saying that the “Lobster” font is not there, but I do not do anything with the line except add monospace, why would I have to change anything to do with the Lobster part of the line if I am only adding the degrade monospace?

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

I am still stumped!

I commented out the Google Font link and it passed the test. Probably what’s missing in your code.

I also commented out the font link and I did not get an error with that part of the lesson, it is the first part that is giving me an error, “Your h2 element should use the font Lobster.” am I not using the font Lobster?

these are the instructions for this problem:

There are several default fonts that are available in all browsers. These generic font families include monospace, serif and sans-serif

When one font isn’t available, you can tell the browser to “degrade” to another font.

For example, if you wanted an element to use the Helvetica font, but degrade to the sans-serif font when Helvetica wasn’t available, you will specify it as follows:

p {
  font-family: Helvetica, sans-serif;
}

Generic font family names are not case-sensitive. Also, they do not need quotes because they are CSS keywords.

To begin with, apply the monospace font to the h2 element, so that it now has two fonts - Lobster and monospace.

In the last challenge, you imported the Lobster font using the link tag. Now comment out that import of the Lobster font(using the HTML comments you learned before) from Google Fonts so that it isn’t available anymore. Notice how your h2 element degrades to the monospace font.

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

  h2{
    font-family: Lobster, monospace;
}

  p {
    font-size: 16px;
    font-family: monospace;
  }
</style>

As you can see I have the h2 element as the p element in the description above, so why am I getting an error?


Add the monospace to the h2 element and then comment out the google font link

2 Likes

Sujith3021 Thank you very much, I was not aware that the link code was to be enveloped into the comment out! I have made the changes to my code and I am still getting the error when I run the test! So now what? I have everything as Sujith3021 has in his snipit and I still get the error!!??

1 Like
 <!-- <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>

Okay I have refreshed and I still get the error, I will stop using mozilla and start using chrome for my studies thank you, and I will up date if that solves my issues.

update! It worked I am using chrome now and it passed first try, not sure why I was unable to use firefox, maybe something in the settings, who knows! Thank you to all who helped me!

Hi @mikedepauw,
Mine works in forefox, maybe it must differ in versions of firefox, Just two steps

  1. Add "monospace " to the h2 and
  2. Comment out the google font link
    This worked for me.

This guy has been crystal clear in his explanation of the problem.
The only answer here is that it is the browser he is using, and yes he forgot to add the " , monospace; " to the element.
Therefore this should be made clear to the authors of that one particular test and if it could be fixed or a note added to it that the user may need to use chrome to pass the test instead of firefox.

It is recommended that Chrome browser be used for all of the challenges and for the testing of all of the projects.

1 Like

Hey, i was getting errors just like you.
The solution is soooo dumb… but yeah… we’re going fast and not realizing.
The only thing you wrote wrong was that little space between “Lobster” and “,”.
Before-incorrect: font-family: Lobster , monospace;
After-correct: font-family: Lobster, monospace;

2 Likes

Thanks, you helped me check mine and found that I forgot the comma between the two fonts.

Every last one of the challenges works just fine in Firefox BTW. Even Safari and Edge work well nowadays. The challenge tests are just really persnickety about how they test for a proper solution, and extra whitespace throws them off.

oh my gosh, you were the only answer that solved my problem! I had semi-colons separating the two fonts. That was my issue! I started to get scared because everyone was saying to use Chrome, which I already was using! Thank you!