Connect Google Font

Hi everyone,

When I want to connect Google font to my HTML , there is a line at the start.

When I included this line, I couldn’t pass my lesson quest. I removed the line and my lesson passed. So I am wondering if I should copy this in the real project? What is the meaning of it?

(Is it the bug in the lesson or is this line just unnecessary? )

Thank you

Sunny

Hello! Could you provide a link to the exercise, please? Could you post the code you’ve written as well, please. See this post on how to correctly format code in the forums!

Thank you.

The link to the exercise: https://www.codecademy.com/paths/web-development/tracks/getting-more-advanced-with-design/modules/learn-css-typography/lessons/css-typography/exercises/linking-fonts-ii

The code I’ve written:

<head>
  <title>Typography Blog</title>
  <link rel="stylesheet" type="text/css" href="styles/reset.css">
  <link rel="stylesheet" type="text/css" href="styles/style.css">
  <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

</head>

But on the google font page, they said copy the followings:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

When I copied all of them to the in the exercise, it didn let me pass. So I have to delete this line:

<link rel="preconnect" href="https://fonts.gstatic.com">

My question is:
What does this line mean? Should we use it in real life or not?

Thank you,
Sunny

What I think it does is make the font download quicker; however I haven’t worked with it much. I did find this article which seemed quite good.

1 Like