Wie integriere ich Google Fonts in CSS-Stylesheets?

Question

Ich habe vor ein paar Wochen angefangen, CSS zu lernen und mit Schriftarten zu experimentieren, die ich bei Google Fonts gefunden habe. Selbst nachdem ich ein paar Freunde gefragt habe, bin ich mir nicht sicher, was mit meinem Code nicht stimmt. (Hinweis: Ich habe sowohl Chrome als auch Edge ausprobiert, aber keines hat funktioniert.) Hier ist der HTML-Abschnitt, der die Schriftart enthält und auf die CSS-Tabelle verweist:

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>

Ich bin froh zu wissen, was hier falsch ist. Dank im Voraus!

Ich habe versucht, Google Fonts mithilfe einer CSS-Tabelle zu verwenden, aber die Schriftart wird nicht gerendert

Answer 1

您正在请求字体 ABeeZee，但您在 CSS 中定义了 Atlanta。如果您想使用该字体，这些值必须匹配

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

  
  this is a font test