How do you use Google Fonts in a CSS stylesheet?-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

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>