Connect Google Font

Get Help HTML
#1

Hi everyone,

Screen Shot 2020-12-02 at 11.07.51 PM
Screen Shot 2020-12-02 at 11.07.51 PM610×620 28.6 KB

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

#2

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!

#3

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

#4

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