CSS-Google-Schriftarten

Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Google-Schriftarten

Wenn Sie keine der Standardschriftarten in HTML verwenden möchten, können Sie Google Fonts verwenden.

Die Nutzung von Google Fonts ist kostenlos und es stehen mehr als 1000 Schriftarten zur Auswahl.

So verwenden Sie Google-Schriftarten

Fügen Sie einfach einen speziellen Stylesheet-Link im Abschnitt <head> hinzu und verweisen Sie dann auf die Schriftart im CSS.

Beispiel

Hier wollen wir eine Schriftart namens „Sofia“ von Google Fonts verwenden:

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  
  font-family: "Sofia", sans-serif;
}
</style>
</head>

Ergebnis :

Sofia Font

Lorem ipsum dolor sit amet.

123456790

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
}
</style>
</head>
<body>

<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>

Beispiel

Hier wollen wir eine Schriftart namens „Trirong“ von Google Fonts verwenden:

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
  
  font-family: "Trirong", serif;
}
</style>
</head>

Ergebnis :

Trirong Font

Lorem ipsum dolor sit amet.

123456790

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
  font-family: "Trirong", serif;
}
</style>
</head>
<body>

<h1>Trirong Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>

Beispiel

Hier wollen wir eine Schriftart namens „Audiowide“ von Google Fonts verwenden:

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
  
  font-family: "Audiowide", sans-serif;
}
</style>
</head>

Ergebnis :

Audiowide Font

Lorem ipsum dolor sit amet.

123456790

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
  font-family: "Audiowide", sans-serif;
}
</style>
</head>
<body>

<h1>Audiowide Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>

Hinweis: Wenn Sie eine Schriftart in CSS angeben, geben Sie diese immer unter an Mindestens eine Fallback-Schriftart (um unerwartetes Verhalten zu vermeiden). Daher sollten Sie auch hier am Ende der Liste eine generische Schriftfamilie (z. B. Serif oder Sans-Serif) hinzufügen.

Eine Liste aller verfügbaren Google Fonts finden Sie in unserem How To - Google Fonts Tutorial.

Verwenden Sie mehrere Google-Schriftarten

Um mehrere Google-Schriftarten zu verwenden, trennen Sie die Schriftartnamen einfach durch einen senkrechten Strich Zeichen (|), etwa so:

Beispiel

Fordern Sie mehrere Schriftarten an:

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
  h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", 
  sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>

Ergebnis :

Audiowide Font

Sofia Font

Trirong Font

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {
  font-family: "Audiowide", sans-serif;
}

h1.b {
  font-family: "Sofia", sans-serif;
}

h1.c {
  font-family: "Trirong", serif;
}
</style>
</head>
<body>

<h1 class="a">Audiowide Font</h1>

<h1 class="b">Sofia Font</h1>

<h1 class="c">Trirong Font</h1>

</body>
</html>

Hinweis: Das Anfordern mehrerer Schriftarten kann Ihre Webseiten verlangsamen! Seien Sie also vorsichtig.

Gestaltung von Google-Schriftarten

Natürlich können Sie Google Fonts mit CSS nach Ihren Wünschen gestalten!

Beispiel

Gestalten Sie die Schriftart „Sofia“:

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  
  font-family: "Sofia", sans-serif;
  font-size: 30px;
  
  text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>

Ergebnis :

Sofia Font

Lorem ipsum dolor sit amet.

123456790

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
  text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
<body>

<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>

</body>
</html>

Aktivieren von Schrifteffekten

Google hat außerdem verschiedene Schriftarteffekte aktiviert, die Sie verwenden können.

Fügen Sie zunächst effect=effectname zur Google API hinzu. Fügen Sie dann einen speziellen Klassennamen zu dem Element hinzu, das das Special verwenden soll Wirkung. Der Klassenname beginnt immer mit font-effect- und endet mit dem effectname.

Beispiel

Fügen Sie den Feuereffekt zur Schriftart „Sofia“ hinzu:

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
  
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
  <body>
<h1 class="font-effect-fire">Sofia on 
  Fire</h1>
</body>

Ergebnis :

Sofia on Fire

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
<body>

<h1 class="font-effect-fire">Sofia on Fire</h1>
<p class="font-effect-fire">Lorem ipsum dolor sit amet.</p>
<p class="font-effect-fire">123456790</p>

</body>
</html>

Um mehrere Schriftarteffekte anzufordern, trennen Sie einfach die Effektnamen durch ein Pipe-Zeichen (|), etwa so:

Beispiel

Fügen Sie der Schriftart „Sofia“ mehrere Effekte hinzu:

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
  
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
  <body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline 
  Effect</h1>
<h1 class="font-effect-emboss">Emboss 
  Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple 
  Shadow Effect</h1>
</body>

Ergebnis :

Neon Effect

Outline Effect

Emboss Effect

Multiple Shadow Effect

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
  font-family: "Sofia", sans-serif;
  font-size: 30px;
}
</style>
</head>
<body>

<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline Effect</h1>
<h1 class="font-effect-emboss">Emboss Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple Shadow Effect</h1>

</body>
</html>