Erste Schritte mit der Google Fonts API

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:

Schönes Web gestalten

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:

Schönes Web gestalten

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:

  1. 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">

  2. 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:

Das ist ein Schrifteffekt!

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
Verfall 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