How to incorporate Google Fonts into CSS stylesheets?

Question

I started learning CSS a few weeks ago and experimenting with fonts I found on Google Fonts. Even after asking a few friends, I'm not sure what's wrong with my code. (Note: I tried both Chrome and Edge, but neither worked) Here is the HTML section that contains the font and references the CSS table:

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'm glad to know what's wrong here. Thanks in advance!

I tried using a Google font using a CSS table, but the font didn't render

Answer 1

You are requesting the font ABeeZee, but you have Atlanta defined in CSS. If you want to use this font, these values ​​must match

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

  
  this is a font test