CSS- Google-Schriftarten
Google-Schriftarten
Wenn Sie keine der Standardschriften in HTML verwenden möchten, können Sie Google Fonts verwenden.
Google Fonts können kostenlos verwendet werden 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
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
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
Hinweis: Wenn Sie eine Schriftart in CSS angeben, führen Sie immer mindestens eine Fallback-Schriftart auf (um unerwartetes Verhalten zu vermeiden). Auch hier sollten Sie also eine generische Schriftfamilie (wie Serif oder Sans-Serif) am Ende der Liste 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 einfach die Schriftartnamen mit einem Pipe-Zeichen ( |), wie folgt:
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
Hinweis: Das Anfordern mehrerer Schriftarten kann Ihre Webseiten verlangsamen! Seien Sie also vorsichtig.
Gestaltung von Google Fonts
Natürlich können Sie Google Fonts mit CSS nach Belieben 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
Schrifteffekte aktivieren
Google hat auch verschiedene Schrifteffekte aktiviert, die Sie verwenden können.
Fügen Sie zuerst zur Google-API hinzu und fügen Sie dann dem Element, das den Spezialeffekt verwenden soll, einen speziellen Klassennamen hinzu. Der Klassenname beginnt immer mit
und endet mit dem .effect=effectnamefont-effect-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
Um mehrere Schrifteffekte anzufordern, trennen Sie einfach die Effektnamen mit einem Pipe-Zeichen ( |), wie folgt:
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