Hi there.
I’m on the Full Stack path, going through improved styling with CSS course right now. I just learned about Google Fonts and how to use them. But can’t link the font from google to an HTML file in my project.
This is the font I’m trying to link: Google Fonts
These are the lines I need to insert in head tag on html:
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=Pacifico&display=swap” rel=“stylesheet”
(Note: I excluded angle brackets above, because for some reason it’s not displaying the content inside of them here on forums for some reason. The syntax in my HTML is correct - that was the first part I was paying attention to.)
I’m not sure what the “CSS class” part is about, I trying to import it as well, still nothing.
My project is hosted localy on my PC, so I can’t provide a URL to it. There is an h1 and a
element. In style.css (which is of course linked properly) I’m applying the ruleset:
- {
font-family: “Pacifico”;
}
So I’m expecting to see both paragraph and h1 in my HTML in this font, when I’m opening it in google chrome. But it’s not. And I’m not sure were the issue is.
Any suggestions?
EDIT:
Adding full HTML and CSS with proper code sharing. Thanks @ray-13 for the heads up!
HTML:
<!DOCTYPE html>
<!--project started on 4/22/2024-->
<html>
<head>
<title>Kundalini yoga with Elena</title>
<link rel="stylesheet" href="./resources/css/style.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=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
<h1>Kundalini yoga with Elena</h1>
<p>Testing the font.</p>
</body>
</html>
CSS:
* {
font-family: 'Pacifico';
}