More explanation to understand!

HTML-CSS
#1

Tell us what’s happening:
Describe your issue in detail here.
I got it right after my mistake, but I just don’t understand FAMILY_NAME do I even use that? I used FAMILY_NAME as Lobster as said on the tutorial, but it gave me another font. Plus where do rel=“stylesheet” and type="text/css come from, is that something that always comes when you import google font or is it applied to any type of imported font. Also when you paste the link do you need to add family=lobster? Is it case-sensitve?

  **Your code so far**


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

p {
  font-size: 16px;
  font-family: monospace;
}
h2{font-family:lobster;}
</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/89.0.4389.128 Safari/537.36.

Challenge: Import a Google Font

Link to the challenge:

#2

Hi there,

this part is for connecting google font apis to your template. By that, you’d be able to choose a specific font for your file. You need to specify the font type you want to use when you are about to import google fonts.

#3

Hello!
yeah, I think I just had to process more because FAMILY_NAME is just practically like a placeholder and then it was describing that “lobster” is a FAMILY_NAME type of font. So I think I understand now.

Thank you!

#4

No problem. :slight_smile: I recommend this resource also:

#5

Amazing! Thank you so much! Definitely added more to what I saw on the tutorial. Appreciate it!

#6

When you import a Google font, you will also see the required CSS for the font over there. You can always copy paste that. I guess it is much easier to do just that.

1 Like
#7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.