freeCodeCamp Challenge Guide: Specify How Fonts Should Degrade

Specify How Fonts Should Degrade


Problem Explanation

We need to apply the monospace font to the h2 element, so that it now has two fonts - Lobster and monospace. After, we need to 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.


Solutions

Solution 1 (Click to Show/Hide)

To the property font-family in selector h2, in addition to Lobster font we need to add monospace:

h2 {
    font-family: Lobster, monospace;
  }

After this, we need to comment import of the Lobster font:

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

select all import and ctrl+/:

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

this is literally no help at all

26 Likes

can anyone help with this one? I’m not understanding it completely. When I run the test, I either get the first two correct, or the second two, can’t get them all correct so I can move on. thanks for any help.

7 Likes

never mind…I got it…not sure how but it worked. LOL

3 Likes

h2 {
font-family:Lobster;
}

h2 {
font-family:Lobster,monospace;
}

18 Likes

Try this.

.red-text { color: red; }

h2{
font-family:
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

CatPhotoApp

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

2 Likes

what is it that im missing i dont understand???

4 Likes

i still dont get it.I am doing as per the examples but still its either am getting the first two correct and the last two wrong or the other way around

I think this will help

<!comment

link href=“https://fonts.googleapis.com/css?family=Lobster” rel=“stylesheet” type=“text/css”

–>

4 Likes

This should help.

<!comment

link href=“https://fonts.googleapis.com/css?family=Lobster” rel=“stylesheet” type=“text/css”

–>

2 Likes

hello I’m new to the camp… any advice

2 Likes

well i did not necessarily use the above example but the method i used worked out better for me.
Thanks anyway

In my case I could only get the first two checkmarks or the last two check marks.

Turned the first tag was very close to the google font link and I had been commenting that out by accident repeatedly.

Here’s what ended up getting it to go through

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

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
14 Likes