Google Fonts HTML

HTML/CSS
1

I need some help, a tad confused here. Im trying to a Googl Font, the video mosh has for this is slight different

He says to add the code for font to your html, ok that is this - I have this added right below the tag Now in the video it alks a single line of CSS, this updated version of google fonts give you a ton a few CSS styles to choose from for each font.

I have my CSS style sheet, im confused on the syntax of how this should look in the stsyle sheet - Can someone provide me a screenshort of all this should look? What ever I am doing is not working, Im stumped!

Thank you!

example

.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}```

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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
2

Hi,
I did not watch that part yet but Google Fonts is cool.

When you “get a font” you can ask for code.
It gives it to you in 2 flavours.

Link which is what you are talking about. You need to add HTML

image
image706×204 12.3 KB

@import which is my preffered option.

Why ? because I do not have to add it in HTML and I can import a dedicated font CSS in another CSS.

image
image697×186 10.8 KB

The classes they provide are optional and you can use the fonts without them. Because you can apply several classes to any element, you could use them to appy a specific font style.
That’s it.

But you can do whatever you want as soon as you have a link or @import respectively in HTML or CSS.

It is up to you.

3

Yes, I docvered this last night, I added the HTML and styled an H1 element, pretty sure that is how it works.