Why is my chosen google font not working?

Tell us what’s happening:
Hey everyone!
I’m recently building my product page in the HTML/CSS course. So far, so good.
At the moment I am working on the design and I want to add some google fonts. I thought I knew how it’s working, and I got it to work before in other projects, but this time it just doesn’t want to :smiling_face_with_tear:

So I put the code, that google fonts generated in the head section, like this (I just give you the whole head section):

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
    
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Licorice&display=swap" rel="stylesheet">

  <link rel="stylsheet" href="./styles.css">
  
    <title>Plantbox Product Landing Page</title>
</head>

The css just looks like this so far:
h1 {
font-family: ‘Licorice’, cursive;
}

I also tried adding the font-weight, changing the html code to only one font-weight…
The only thing happening is, that the font of the heading changes to a cursive font, by default (hope that’s the correct term). It doesn’t change into the handwritten one I want it to be. And I just wonder - why is that. Is it because my browser can’t work with that? But it doesn’t make any sense to me, since it has worked before with a different font. Or is there a mistake in the code?
I mean… I would think that it should work, if you use the exact code, that google gives you :thinking:

If someone has an idea or knows what the problem is, I would be veeeerrryyy happy to know! Thanks! :upside_down_face:

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/112.0

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

Welcome to our community!

Post the entire html and css code properly formatted. Use the </> button to do that.

Oh yeah sure - thank’s for the hint!

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
    
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Licorice&display=swap" rel="stylesheet">

  <link rel="stylsheet" href="./styles.css">
  
    <title>Plantbox Product Landing Page</title>
</head>

You missed the “e” in stylesheet!

1 Like

Wow, how ridiculous! :woman_facepalming: I feel like with every project I have to learn over and over to pay more attention to detail :smiley: Thanks a lot!

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