Font link not working

Tell us what’s happening:
I went to the google fonts website searched for the font lobster, right clicked and copied the address. I then pasted it but it is nothing like the one they taught us and I can’t get the h2 element to change the font to lobster.

Your code so far

.red-text { color: red; } p { font-size: 16px; font-family: monospace; } h2{ font-family: lobster, 'Open Sans'; }

CatPhotoApp

Click here to view more cat photos.

A cute orange cat lying on its back.

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

<link href="https://fonts.google.com/specimen/Lobster?query=lobster">
<style>
.red-text {
  color: red;
}

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

h2{
  font-family: lobster, 'Open Sans';
}
</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

1 Like

Hey @Aman215. You don’t need to go to google fonts and search for the font. Instead, the challenge provides you with the link to the font. You just need to use that.

Also, the link you pasted is wrong. If you want to link to a google font, search for it, click on the font, select your font-weight by clicking on “Select this style”. Now, a new sidebar will appear. Click on the “Embed” tab and copy the code provided.

Image:

Happy Coding!

1 Like