Generic name gives error

HTML-CSS
1

Tell us what’s happening:
Tell us what’s happening:

Hi, I was able to get past this challenge with some head scratching. The instructions indicate the use of a “generic name” is optional so I used “monospace” in the generic name.

font-family: FAMILY_NAME, GENERIC_NAME; .

I would then get the error:

" You should only use an h2 selector to change your font", which I was doing.

Maybe update the question to say “don’t place in a generic name for now”?

Cheers.

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="https://freecatphotoapp.com/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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36.

Challenge: Import a Google Font

Link to the challenge:

1 Like
2

well, the instructions only mention to set a font-family

do you think it is worth reporting as a bug?

1 Like
3

Hey @poo_gently.

Yeah. The challenge only says you to add the family name only. So, better do what it says. As you know, it’s automatic and if it finds any error or if your code does what the challenge did not say to do, then it displays some testcases as failed. So, only do what the challenge says. If you want to play with your code, you can, but before you run the tests, reset your code and do what’s said in that chapter.

What about that?

Happy Coding!

4

Thanks Paulsonstech. But it doesn’t say “only”, it says “Import the Lobster font to your web page. Then, use an element selector to set Lobster as the font-family for your h2 element.” and this is after showing the use of “generic” in the description".

To me, the best solution would be allowing the user to input a solution that can contain a generic name as well.

Someone mentioned reporting a bug - but I’m not sure if this was addressed to me. I couldn’t see how to report a bug.

Thanks again.

5

I don’t think that restriction is intended. It’s the test for the selector that is failing because the regex doesn’t account for a fallback font to be declared. I’m sure it would be possible to allow for this. Not sure if it’s worth it or not to change the test.

assert(/\s*[^\.]h2\s*\{\s*font-family\:\s*(['"]?)Lobster\1\s*(;\s*\}|\})/gi.test(code));

You can open an issue on GitHub. Just make sure to give it a good title and description, maybe with a link to this forum thread.