Import google font

HTML-CSS
1

I imported google font lobster but h2 {font-family: Lobster;} not working…

2

Not entirely sure, but I believe you need to use "Lobster" instead of Lobster.

3

nope, that didn’t work

4

How did you import the font, because it works for me:

5

I just copied and pasted the link like it said on line 1 and then tried to apply the font value to h2

6
7

The @import line or the link tag? If you place it in your CSS, you need @import.

8

I copied the link tag

9

Ah, I didn’t know it was a challenge. You will have to add the link at the top (above the style tags) and add h2{font-family:...} inside the style tags. Can you paste your code?

10

just refresh your page

11

that’s i try but it’s not work for me

i can’t pass

“Use an h2 CSS selector to change the font.”

how i should to do i try many method that i know.

12

this is my code

Screenshot_2
Screenshot_2715×800 28.5 KB

13

did you add the h2 line above the main tag? If yes, remove it. It should not be there.
also change “Lobster” so it is not in quotes.
and change “.lobster” to “.h2”

edit: oops should have said “change .lobster to h2”

14

thank you but it’s not work. i don’t know how should i do

Screenshot_3
Screenshot_3713×823 27.3 KB

15

remove the ‘.’ from infront of the h2 selector on line 13
also remove the double quotes from around the word Lobster on line 14

16

that same output can’t pass this exercise

Screenshot_4
Screenshot_4714×822 26.8 KB

17

please paste all your code here in between two lines with three backticks on each line like this:
```
all code here
```

Make sure you use backtick symbol not apostrophe (the backtick is a button near the ESC button on your keyboard)

18

All Code here

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

<style>
  .red-text {
    color: red;
  }

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

  h2 {
    font-family : Lobster;    
  }

</style>


<main>
  <h2>CatPhotoApp</h2>  
  <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="/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>
19

try removing the extra space between “font-family” and the colon
so it becomes

font-family: Lobster;
20

also it looks like your link is not quite correct. Fix it to match exactly the given link in the instructions.

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