In diesem Leitfaden wird erläutert, wie Sie mit der Google Fonts API Schriftarten auf Webseiten einfügen. Es ist keine Programmierarbeit erforderlich. Sie müssen Ihrem HTML-Dokument lediglich einen speziellen Stylesheet-Link hinzufügen und dann in einem CSS-Stil auf die Schriftart verweisen.
Kurzes Beispiel
Hier ein Beispiel: Kopieren Sie den folgenden HTML-Code und fügen Sie ihn in eine Datei ein:
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine"> <style> body { font-family: 'Tangerine', serif; font-size: 48px; } </style> </head> <body> <div>Making the Web Beautiful!</div> </body> </html>
Öffnen Sie die Datei dann in einem modernen Webbrowser. Sie sollten eine Seite mit Folgendem in der Schriftart Tangerine sehen:
Dieser Satz ist gewöhnlicher Text, den Sie mithilfe von CSS ändern können. Versuchen Sie, dem Stil im vorherigen Beispiel einen Schatten hinzuzufügen:
body { font-family: 'Tangerine', serif; font-size: 48px; text-shadow: 4px 4px 4px #aaa; }
Unter dem Text sollte jetzt ein Schlagschatten zu sehen sein:
Und das ist erst der Anfang dessen, was Sie mit der Fonts API und CSS tun können.
Überblick
Sie können die Google Fonts API in nur zwei Schritten verwenden:
Fügen Sie einen Stylesheet-Link hinzu, um die gewünschten Webschriftarten anzufordern:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">
Gestalten Sie ein Element mit der angeforderten Webschriftart, entweder in einem Stylesheet:
.css-selector { font-family: 'Font Name', serif; }
oder mit einem Inline-Style im Element selbst:
<div style="font-family: 'Font Name', serif;">Your text</div>
Eine Liste der verfügbaren Schriftarten finden Sie unter Google Fonts.
Schriftfamilien und -stile in einer Stylesheet-URL angeben
Um zu ermitteln, welche URL in Ihrem Stylesheet-Link verwendet werden soll, beginnen Sie mit der Basis-URL der Google Fonts API:
https://fonts.googleapis.com/css
Fügen Sie dann den URL-Parameter family=
mit einem oder mehreren Schriftfamiliennamen und ‐stilen hinzu.
So fordern Sie beispielsweise die Schriftart Inconsolata an:
https://fonts.googleapis.com/css?family=Inconsolata
Wenn Sie mehrere Schriftfamilien anfordern möchten, trennen Sie die Namen durch einen senkrechten Strich (|
).
So fordern Sie beispielsweise die Schriftarten Tangerine, Inconsolata und Droid Sans an:
https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
Wenn Sie mehrere Schriftarten anfordern, können Sie alle diese Schriftarten auf Ihrer Seite verwenden. Übertreibt es aber nicht. Für die meisten Seiten sind nicht sehr viele Schriftarten erforderlich. Wenn du viele Schriftarten anforderst, wird das Laden der Seiten möglicherweise verlangsamt.
Die Google Fonts API stellt standardmäßig die reguläre Version der angeforderten Schriftarten bereit. Wenn Sie andere Stile oder Stärken anfordern möchten, hängen Sie an den Namen der Schriftart einen Doppelpunkt (:
) an, gefolgt von einer Liste von Stilen oder Stärken, die durch Kommas getrennt sind (,
).
Beispiel:
https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
Die verfügbaren Stile und Stärken für eine bestimmte Schriftart finden Sie in der Liste der Schriftarten bei Google Fonts.
Sie können für jeden angeforderten Stil entweder den vollständigen Namen oder eine Abkürzung angeben. Für Gewichtungen können Sie alternativ eine numerische Gewichtung angeben:
Stil | Spezifizierer |
---|---|
kursiv | italic oder i |
fett | bold oder b oder eine numerische Gewichtung wie 700 |
fett-kursiv | bolditalic oder bi |
Wenn Sie beispielsweise Cantarell kursiv und Droid Serif fett und mit Droid Serif fett anfordern möchten, können Sie eine der folgenden URLs verwenden:
https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700
Schriftartanzeige verwenden
Mit font-display können Sie festlegen, was passieren soll, wenn die Schriftart nicht verfügbar ist. In der Regel ist es angemessen, einen anderen Wert als den Standardwert auto
anzugeben.
Übergeben Sie den gewünschten Wert im display
-Parameter des Abfragestrings:
https://fonts.googleapis.com/css?family=Roboto&display=swap
Skriptteilmengen angeben
Einige Schriftarten im Google Font Directory unterstützen mehrere Schriftsysteme (z. B. Latein, kyrillisch und Griechisch). Um festzulegen, welche Teilmengen heruntergeladen werden sollen, muss der Teilmengenparameter an die URL angehängt werden.
Um beispielsweise die kyrillische Teilmenge der Roboto Mono-Schriftart anzufordern, lautet die URL:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic
Zum Anfordern der griechischen Teilmenge der Schriftart Roboto Mono würde die URL so aussehen:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek
Um sowohl griechische als auch kyrillische Teilmengen der Schriftart Roboto Mono anzufordern, lautet die URL:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic
Die lateinische Teilmenge ist immer enthalten, falls verfügbar, und muss nicht angegeben werden. Wenn ein Clientbrowser Unicode-Bereich (http://caniuse.com/#feat=font-unicode-range) unterstützt, wird der Teilmengenparameter ignoriert. Der Browser wählt eine der von der Schriftart unterstützten Teilmengen aus, um das zu erhalten, was zum Rendern des Texts erforderlich ist.
Eine vollständige Liste der verfügbaren Schriftarten und Schriftartuntergruppen finden Sie unter Google Fonts.
Schriftartanfragen optimieren
Wenn Sie eine Webschriftart auf Ihrer Website oder in Ihrer Anwendung verwenden möchten, wissen Sie oft im Voraus, welche Buchstaben Sie benötigen. Das ist häufig der Fall, wenn Sie Webschriftarten in Logos oder Überschriften verwenden.
In diesen Fällen sollten Sie in der Schriftartanfrage-URL den Wert text=
angeben. So kann Google eine Schriftartdatei zurückgeben, die für Ihre Anfrage optimiert ist. In einigen Fällen kann dadurch die Größe der Schriftartdatei um bis zu 90 % reduziert werden.
Fügen Sie Ihren Google Fonts API-Anfragen einfach text=
hinzu, um diese Funktion zu nutzen. Wenn Sie beispielsweise nur Inconsolata für den Titel Ihres Blogs verwenden, können Sie den Titel selbst als Wert von text=
festlegen. So würde die Anfrage aussehen:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello
Wie bei allen Abfragestrings sollten Sie auch hier eine URL-Codierung für den Wert vornehmen:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World
Diese Funktion funktioniert auch für internationale Schriftarten, sodass Sie UTF-8-Zeichen angeben können. Beispiel: ¡Hola! wird wie folgt dargestellt:
https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!
Schrifteffekte aktivieren (Beta)
Wenn Sie auf Ihrer Website Überschriften erstellen oder Texte anzeigen lassen, sollten Sie Text dekorativ gestalten. Google hat eine Reihe von Schrifteffekten zur Verfügung gestellt, die Sie mit minimalem Aufwand für ansprechenden Anzeigetext verwenden können, um Ihnen die Arbeit zu erleichtern. Beispiel:
Wenn Sie diese Betafunktion verwenden möchten, fügen Sie Ihrer Google Fonts API-Anfrage einfach effect=
hinzu und fügen den entsprechenden HTML-Elementen den entsprechenden Klassennamen hinzu. Im obigen Beispiel haben wir den Schrifteffekt shadow-multiple
verwendet, sodass die Anfrage so aussieht:
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple
Fügen Sie den HTML-Element(en) den entsprechenden Klassennamen hinzu, um den Effekt zu nutzen. Der entsprechende Klassenname ist immer der Effektname mit dem Präfix font-effect-
. Der Klassenname für shadow-multiple
wäre also font-effect-shadow-multiple
:
<div class="font-effect-shadow-multiple">This is a font effect!</div>
Sie können mehrere Effekte anfordern. Trennen Sie dazu die Namen der Effekte durch ein Pipe-Zeichen (|
).
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float
Im Folgenden finden Sie eine vollständige Liste aller Schriftarteffekte, die wir anbieten:
Auswirkung | API-Name | Kursname | Support |
---|---|---|---|
Anaglyphen | anaglyph |
font-effect-anaglyph |
Chrome, Firefox, Opera, Safari |
Backsteinschild | brick-sign |
font-effect-brick-sign |
Chrome, Safari |
Leinwanddruck | canvas-print |
font-effect-canvas-print |
Chrome, Safari |
Knackeln | crackle |
font-effect-crackle |
Chrome, Safari |
decaying |
font-effect-decaying |
Chrome, Safari | |
Zerstörung | destruction |
font-effect-destruction |
Chrome, Safari |
Verzweifelt | distressed |
font-effect-distressed |
Chrome, Safari |
Beunruhigtes Holz | distressed-wood |
font-effect-distressed-wood |
Chrome, Safari |
Embos | emboss |
font-effect-emboss |
Chrome, Firefox, Opera, Safari |
Feuer | fire |
font-effect-fire |
Chrome, Firefox, Opera, Safari |
Feueranimation | fire-animation |
font-effect-fire-animation |
Chrome, Firefox, Opera, Safari |
Fragil | fragile |
font-effect-fragile |
Chrome, Safari |
Gras | grass |
font-effect-grass |
Chrome, Safari |
Eis | ice |
font-effect-ice |
Chrome, Safari |
Mitose | mitosis |
font-effect-mitosis |
Chrome, Safari |
Neon | neon |
font-effect-neon |
Chrome, Firefox, Opera, Safari |
Umriss | outline |
font-effect-outline |
Chrome, Firefox, Opera, Safari |
Gründlichkeit | putting-green |
font-effect-putting-green |
Chrome, Safari |
Scuffed Stahl | scuffed-steel |
font-effect-scuffed-steel |
Chrome, Safari |
Mehrere Schatten | shadow-multiple |
font-effect-shadow-multiple |
Chrome, Firefox, Opera, Safari |
Geteilt | splintered |
font-effect-splintered |
Chrome, Safari |
Statisch | static |
font-effect-static |
Chrome, Safari |
Stonewash | stonewash |
font-effect-stonewash |
Chrome, Safari |
Dreidimensional | 3d |
font-effect-3d |
Chrome, Firefox, Opera, Safari |
Dreidimensionale Gleitkommazahl | 3d-float |
font-effect-3d-float |
Chrome, Firefox, Opera, Safari |
Retro | vintage |
font-effect-vintage |
Chrome, Safari |
Hintergrund | wallpaper |
font-effect-wallpaper |
Chrome, Safari |
Es gibt noch viele weitere Möglichkeiten, Schriftarten zu gestalten, und mit CSS ist vieles möglich. Hier sind nur ein paar Ideen für den Einstieg. Weitere Ideen finden Sie, indem Sie auf Google nach CSS-Texteffekte suchen und sich viele Ideen ansehen, die bereits im Web zu finden sind.
Weitere Informationen
- Eine vollständige Liste der über die Google Fonts API bereitgestellten Schriftfamilien finden Sie auf Google Fonts.
- Hier erfahren Sie, wie Sie das Ladeprogramm für Schriftarten verwenden, um das Laden von Schriftarten zu steuern.
- Weitere Informationen zur Funktionsweise der Google Fonts API finden Sie auf der Seite Technische Überlegungen.