Diese Seite wurde von der Cloud Translation API übersetzt.

Erste Schritte mit der Google Fonts API

In diesem Leitfaden wird erläutert, wie du mit der Google Fonts API Schriftarten zu deinen Webseiten hinzufügen kannst. Du brauchst nichts weiter zu programmieren. Du musst nur noch einen speziellen Stylesheet-Link zu deinem HTML-Dokument hinzufügen und dann auf die Schriftart im CSS-Stil verweisen.

Ein 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. Du solltest eine Seite mit der folgenden Schriftart in der Tangerine sehen:

Das Web wunderschön gestalten!

Dieser Satz besteht aus gewöhnlichem Text. Sie können also die Darstellung mithilfe von CSS ändern. Fügen Sie dem Stil im vorherigen Beispiel einen Schatten hinzu:

body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}

Jetzt sollte jetzt unter dem Text ein Schlagschatten zu sehen sein:

Das Web wunderschön gestalten!

Und das ist nur der Anfang dessen, was Sie mit der Fonts API und CSS tun können.

Übersicht

Die Google Fonts API lässt sich in zwei Schritten einrichten:

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-Stil für das 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 deinem Stylesheet-Link verwendet werden soll, beginne mit der Basis-URL der Google Fonts-API:

https://fonts.googleapis.com/css

Füge dann den URL-Parameter family= mit einem oder mehreren Namen und Stilen für die Schriftfamilie hinzu.

So fordern Sie beispielsweise die Schriftart Inconsolata an:

https://fonts.googleapis.com/css?family=Inconsolata

Wenn du mehrere Schriftfamilien anfordern möchtest, trenne 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 die Schriftarten auf Ihrer Seite verwenden. Überladen Sie die meisten Seiten aber nicht. Außerdem kann es sein, dass sehr viele Schriftarten heruntergeladen werden, was zu langsamen Ladezeiten führt.

Die Google Fonts API stellt standardmäßig die reguläre Version der angeforderten Schriftarten bereit. Wenn Sie andere Stile oder Gewichtungen anfordern möchten, hängen Sie an den Namen der Schriftart einen Doppelpunkt (:) gefolgt von einer Liste von Stilen oder Gewichtungen an, die durch Kommas (,) getrennt sind.

Beispiel:

https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

Informationen zu den verfügbaren Stilen und Gewichtungen für eine bestimmte Schriftart finden Sie in der Liste der Schriftart unter Google Fonts.

Du kannst für jeden angegebenen Stil entweder den vollständigen Namen oder eine Abkürzung angeben. Bei Gewichtungen kannst du auch 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 du zum Beispiel Cantarell kursiv und Droid Serif fett formatieren möchtest, kannst du 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

Schriftart im Display verwenden

Mit font-display kannst du steuern, was passiert, wenn die Schriftart nicht verfügbar ist. In der Regel ist es sinnvoll, einen anderen Wert als den Standardwert für auto anzugeben.

Übergeben Sie den gewünschten Wert in den Parameter display des Abfragestrings:

https://fonts.googleapis.com/css?family=Roboto&display=swap

Skriptteilmengen angeben

Einige Schriftarten im Google Font Directory unterstützen mehrere Skripts, z. B. Latein, Kyrillisch und Griechisch. Wenn Sie angeben möchten, welche Teilmengen heruntergeladen werden sollen, muss der Parameter an die URL angehängt werden.

Wenn Sie beispielsweise die kyrillische Teilmenge der Schriftart Roboto Mono anfordern möchten, lautet die URL:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic

Um die griechische Teilmenge der Schriftart Roboto Mono anzufordern, lautet die URL:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek

Um eine griechische und kyrillische Teilmenge der Schriftart Roboto Mono anzufordern, lautet die URL:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic

Der lateinische Ausdruck ist immer enthalten und muss nicht angegeben werden. Hinweis: Wenn ein Clientbrowser Unicode-Bereich (http://caniuse.com/#feat=font-unicode-range) unterstützt, wird der Teilparameter ignoriert. Der Browser wählt aus den Teilmengen aus, die von der Schriftart unterstützt werden, um den Text zu erhalten.

Eine vollständige Liste der verfügbaren Schriftarten und Teilmengen von Schriftarten finden Sie unter Google Fonts.

Schriftartanfragen optimieren

Wenn du eine Webschriftart auf deiner Website oder in deiner Anwendung verwenden möchtest, weiß du im Voraus, welche Buchstaben du benötigst. Dieser Fehler tritt häufig auf, wenn Sie eine Webschriftart in einem Logo oder einer Überschrift verwenden.

In diesen Fällen solltest du in der URL der Schriftartanfrage einen text=-Wert angeben. Dadurch kann Google eine Schriftartdatei zurückgeben, die für deine Anfrage optimiert ist. In manchen Fällen kann die Größe der Schriftartdatei um bis zu 90 % reduziert werden.

Füge dazu deinen Google Fonts API-Anfragen einfach text= hinzu. Wenn du beispielsweise Inconsolata nur für den Titel deines Blogs verwendest, kannst du den Titel selbst als Wert für text= festlegen. Die Anfrage sieht dann folgendermaßen aus:

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello

Wie bei allen Abfragestrings sollten Sie den Wert per URL codieren:

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World

Dieses Feature funktioniert auch für internationale Schriftarten, bei denen du UTF-8-Zeichen angeben kannst. ¡Hola! wird beispielsweise so dargestellt:

https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!

Schriftarteneffekte aktivieren (Beta)

Wenn du Überschriften oder Anzeigetexte auf deiner Website erstellst, ist es oft sinnvoll, den Text dekorativ zu gestalten. Um dir die Arbeit zu erleichtern, haben wir eine Sammlung von Schriftarteffekten zusammengestellt, mit denen du minimalen Aufwand für die Erstellung ansprechender Anzeigetexte hast. Beispiel:

Das ist ein Schriftarteffekt.

Wenn Sie diese Betafunktion verwenden möchten, fügen Sie einfach effect= in Ihre Google Fonts-API-Anfrage ein und fügen den entsprechenden HTML-Elementen den entsprechenden Klassennamen hinzu. Im obigen Beispiel haben wir den shadow-multiple-Schriftarteffekt verwendet, sodass die Anfrage so aussehen würde:

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple

Fügen Sie den HTML-Elementen den entsprechenden Klassennamen hinzu, um den Effekt zu verwenden. Der entsprechende Klassenname ist immer der Effektname mit dem Präfix font-effect-. Der Klassenname für shadow-multiple wäre daher font-effect-shadow-multiple:

<div class="font-effect-shadow-multiple">This is a font effect!</div>

Du kannst mehrere Effekte anfordern, indem du die Effektnamen durch einen senkrechten Strich (|) trennst.

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float

Hier ist eine vollständige Liste aller unserer Schriftarteffekte:

Effekt	API Name	Kursname	Support
Analytics	`anaglyph`	`font-effect-anaglyph`	Chrome, Firefox, Opera, Safari
Backsteingebäude	`brick-sign`	`font-effect-brick-sign`	Chrome, Safari
Druck auf Leinwand	`canvas-print`	`font-effect-canvas-print`	Chrome, Safari
Reißen	`crackle`	`font-effect-crackle`	Chrome, Safari
Nicht verfügbar	`decaying`	`font-effect-decaying`	Chrome, Safari
Zerstörung	`destruction`	`font-effect-destruction`	Chrome, Safari
Beunruhigt	`distressed`	`font-effect-distressed`	Chrome, Safari
Beunruhigtes Holz	`distressed-wood`	`font-effect-distressed-wood`	Chrome, Safari
Emboss	`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
Fragiles	`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
Gliederung	`outline`	`font-effect-outline`	Chrome, Firefox, Opera, Safari
Grünes Putting	`putting-green`	`font-effect-putting-green`	Chrome, Safari
Geschlossener Stahl	`scuffed-steel`	`font-effect-scuffed-steel`	Chrome, Safari
Shadow Multiple	`shadow-multiple`	`font-effect-shadow-multiple`	Chrome, Firefox, Opera, Safari
Geteilt	`splintered`	`font-effect-splintered`	Chrome, Safari
Statisch	`static`	`font-effect-static`	Chrome, Safari
Steinspülung	`stonewash`	`font-effect-stonewash`	Chrome, Safari
Dreidimensionale	`3d`	`font-effect-3d`	Chrome, Firefox, Opera, Safari
Dreidimensionale Gleitkommazahl	`3d-float`	`font-effect-3d-float`	Chrome, Firefox, Opera, Safari
Vintage	`vintage`	`font-effect-vintage`	Chrome, Safari
Hintergrund	`wallpaper`	`font-effect-wallpaper`	Chrome, Safari

Es gibt noch viele weitere Möglichkeiten zur Erstellung von Schriftarten und viele weitere Möglichkeiten bieten CSS. Wir stellen Ihnen nur einige Ideen vor, die Ihnen den Einstieg erleichtern. Weitere Ideen findest du auf Google. Suche nach CSS-Texteffekten und sieh dir viele der Ideen an, die bereits im Web verfügbar sind.

Weitere Informationen

Eine vollständige Liste der von der Google Fonts API bereitgestellten Schriftfamilien finden Sie unter Google Fonts.
Sehen Sie sich an, wie Sie mit dem Web Font Loader mehr Kontrolle über das Laden von Schriftarten haben.
Weitere Informationen zur Funktionsweise der Google Fonts API finden Sie auf der Seite Technische Überlegungen.