How do you use Google Fonts in a CSS stylesheet?

Question

I started learning CSS a few weeks ago and I am trying to use a font I found on Google Fonts. I'm unsure of what was wrong with my code even after I asked a few friends. (Note: I tried Chrome and Edge, but none work) Here's the HTML section that has the font and that refers to the CSS sheet :

header {
  background-color: #4d4d4d;
  color: #FFFFFF;
  font-size: 5%;
  font-family: 'Alata', sans-serif;
}

<!-- Font Alata https://fonts.google.com/specimen/Alata -->

<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=ABeeZee&display=swap" rel="stylesheet"/>

</head>
<header>
  <link rel="stylesheet" href="style.css">
  this is a font test
  <link
  <a href="link to homepage">

    <img src="link to image" />
  </a>
</header>

I'd be glad to know what's wrong here. Thanks in advance!

I tried using a Google Font using a CSS sheet, but the font does not render

This should be in head with other links tag: `` and you have ` — MaxiGui, Dec 22 '22 at 10:33

score 2 · Answer 1 · answered Dec 22 '22 at 10:34

You are requesting the font ABeeZee but you define Atlanta in your CSS. These values have to match if you want to use the font

header {
  font-family: 'ABeeZee', sans-serif;
}

<!-- Font Alata https://fonts.google.com/specimen/Alata -->

<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=ABeeZee&display=swap" rel="stylesheet"/>

</head>
<header>
  <link rel="stylesheet" href="style.css">
  this is a font test

</header>

Noob Arc · Answer 2 · 2022-12-22T10:45:44.410

you have a font problem you are requesting ABeeZee font but in style sheet you are appling font Alata

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<body>
<style> header {
  background-color: #4d4d4d;
  color: #FFFFFF;
  font-size: 5%;
  font-family: 'Alata', sans-serif;
  font-family: 'Alata', sans-serif;
}</style>
<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=Alata&display=swap" rel="stylesheet">
<style> @import url('https://fonts.googleapis.com/css2?family=Alata&display=swap'); </style>


  </head>
  <header>
    <link rel="stylesheet" href="style.css">
    this is a font test
    <link
    <a href="link to homepage">
      
      <img src="link to image" />
    </a>
  </header>
</body>
</html>

How do you use Google Fonts in a CSS stylesheet?

2 Answers2