Eine API für schnelle, ansprechende Webschriftarten

Hier erfahren Sie, wie Sie mithilfe der Google Fonts CSS API Webschriftarten effizient bereitstellen.

Jimmy Mooney

Im Laufe der Jahre hat sich die Technologie von Webschriften stark verändert. Was früher eine Nischenanwendung war, die ein Textbild oder ein Flash-Plug-in erforderte und die Suchmaschinenoptimierung Ihrer Website beeinträchtigte, ist heute eine gängige Praxis im Web. Früher mussten Sie eine ganze Schriftart laden, bevor die Seite geladen wurde – mit Stilen und Zeichen, die Sie vielleicht gar nicht verwendet haben – aber selbst das gehört der Vergangenheit an.

Auch die Google Fonts CSS API hat sich im Laufe der Jahre weiterentwickelt, um mit den Änderungen bei Web-Schriftarten Schritt zu halten. Sie hat sich vom ursprünglichen Nutzenversprechen weiterentwickelt, das Web schneller zu machen, indem Ihr Browser häufig verwendete Schriftarten auf allen Websites, die die API verwenden, im Cache speichert. Das stimmt nicht mehr, aber die API bietet weiterhin zusätzliche und wichtige Optimierungen, damit Websites schnell geladen werden und die Schriftarten einwandfrei funktionieren.

Mit der CSS API von Google Fonts kann Ihre Website nur die Schriftdaten anfordern, die erforderlich sind, um die CSS-Ladezeit so kurz wie möglich zu halten. So können Websitebesucher Ihre Inhalte so schnell wie möglich laden. Die API antwortet auf jede Anfrage mit der für den jeweiligen Webbrowser am besten geeigneten Schriftart.

Dazu fügen Sie einfach eine einzige HTML-Zeile in Ihren Code ein.

So verwenden Sie die Google Fonts CSS API

In der Google Fonts CSS API-Dokumentation wird das gut zusammengefasst:

Sie müssen nicht programmieren. Fügen Sie einfach einen speziellen Stylesheet-Link zu Ihrem HTML-Dokument hinzu und verweisen Sie dann in einem CSS-Stil auf die Schriftart.

Sie müssen mindestens eine Zeile in den HTML-Code einfügen:

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />

Wenn Sie eine Schriftart über die API anfordern, geben Sie an, welche Schriftfamilie oder -familien Sie benötigen, und optional deren Gewichte, Stile, Untergruppen und viele weitere Optionen. Die API verarbeitet Ihre Anfrage dann auf eine der folgenden beiden Arten:

  1. Wenn in Ihrer Anfrage gängige Parameter verwendet werden, für die die API bereits Dateien hat, werden dem Nutzer sofort Preisvergleichsportal-Daten zurückgegeben und er wird zu diesen Dateien weitergeleitet.
  2. Wenn Sie eine Schriftart mit Parametern angefordert haben, die von der API derzeit nicht im Cache gespeichert werden, wird eine Teilmenge Ihrer Schriftarten im laufenden Betrieb mithilfe von HarfBuzz angefordert und es wird CSS zurückgegeben, das auf sie verweist.

Schriftartdateien können groß sein, müssen es aber nicht

Webschriften können groß sein, das stimmt. Schon eine einzige Gewichtung von Noto Sans Japanese in WOFF2 ist fast 3,4 MB – und der Download für jeden einzelnen Nutzer würde die Ladezeit der Seite stark beeinträchtigen. Wenn jede Millisekunde zählt und jedes Byte wertvoll ist, sollten Sie nur die Daten laden, die Ihre Nutzer benötigen.

Mit der Google Fonts CSS API können Sie sehr kleine Schriftartdateien (Subsets) in Echtzeit erstellen, um Ihren Nutzern nur den für Ihre Website erforderlichen Text und die erforderlichen Stile zur Verfügung zu stellen. Anstatt eine ganze Schriftart bereitzustellen, können Sie mit dem Parameter text bestimmte Zeichen anfordern.

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />

Ein Diagramm mit einer Zeichenanzahl für lateinische, griechische und erweiterte griechische Zeichen

Die CSS API bietet Ihren Nutzern außerdem automatisch zusätzliche Web-Schriftoptimierungen, ohne dass API-Parameter erforderlich sind. Die API stellt Ihren Nutzern CSS-Dateien mit bereits aktivierter unicode-range bereit (sofern von ihrem Webbrowser unterstützt), sodass nur die Schriftarten für die spezifischen Zeichen auf Ihrer Website geladen werden.

Der CSS-Beschreibungsblock „unicode-range“ ist ein Tool, mit dem sich große Schriftdownloads bekämpfen lassen. Diese CSS-Eigenschaft legt einen Bereich von Unicode-Zeichen fest, den die Deklaration @font-face enthält. Wenn eines dieser Zeichen auf der Seite gerendert wird, wird diese Schriftart heruntergeladen. Das funktioniert gut für alle Arten von Sprachen. Sie können also eine Schriftart mit lateinischen, griechischen oder kyrillischen Zeichen verwenden und kleinere Teilmengen daraus erstellen. Im vorherigen Diagramm sehen Sie, dass Sie bei einem Ladevorgang aller drei Zeichensätze über 600 Glyphen benötigen würden.

Ein Diagramm mit einer Zeichenanzahl für einfaches Latein, erweitertes Latein, Koreanisch und Japanisch.

Außerdem werden chinesische, japanische und koreanische (CJK) Schriftarten für das Web unterstützt. Im vorherigen Diagramm sehen Sie, dass eine CJK-Schrift 15 bis 20 mal so viele Zeichen abdeckt wie eine lateinische Schrift. Diese Schriftarten sind in der Regel sehr groß und viele der Zeichen in diesen Sprachen werden nicht so häufig verwendet wie andere.

Mit der CSS API und dem Unicode-Bereich können Dateiübertragungen um etwa 90 % reduziert werden. Mit dem unicode-range-Beschreibungselement kannst du jeden Teil separat definieren. Jedes Segment wird nur heruntergeladen, wenn deine Inhalte eines der Zeichen in diesen Zeichenbereichen enthalten.

Beispiel: Wenn Sie nur das Wort こんにちは in Noto Sans JP festlegen möchten, gehen Sie so vor:

  • WOFF2-Dateien selbst hosten
  • Verwenden Sie die CSS API, um WOFF2 abzurufen.
  • Verwenden Sie die CSS API mit dem Parameter text=, der auf "こんちちち" festgelegt ist.

Grafik mit Vergleich verschiedener Methoden zum Herunterladen von Noto Sans JP

In diesem Beispiel sehen Sie, dass Sie mit der CSS API bereits 97,5 % gegenüber dem Self-Hosting des WOFF2-Schriftbilds sparen, da die API die Trennung großer Schriftarten in Unicode-Bereiche unterstützt. Wenn Sie noch einen Schritt weiter gehen und genau den Text angeben, der angezeigt werden soll, können Sie die Schriftgröße auf nur 95,3 % der CSS API-Schriftart reduzieren. Das entspricht 99,9 % der Größe der selbst gehosteten Schriftart.

Die Google Fonts CSS API stellt Schriftarten automatisch in dem kleinsten und kompatiblen Format bereit, das vom Browser Ihres Nutzers unterstützt wird. Wenn der Nutzer einen Browser mit WOFF2-Unterstützung verwendet, liefert die API die Schriftarten in WOFF2. Wenn er jedoch einen älteren Browser verwendet, liefert die API die Schriftarten in einem von diesem Browser unterstützten Format. Um die Dateigröße für jeden Nutzer zu reduzieren, entfernt die API auch Daten aus den Schriftarten, die nicht benötigt werden. So werden beispielsweise Daten zu Vorschlägen für Nutzer entfernt, deren Browser sie nicht benötigen.

Webschriften mit der Google Fonts CSS API zukunftssicher machen

Das Google Fonts-Team trägt auch zu neuen W3C-Standards bei, die Web-Schrifttechnologien weiter voranbringen, z. B. WOFF2. Ein aktuelles Projekt ist die inkrementelle Schriftartübertragung. Damit können Nutzer sehr kleine Teile von Schriftartdateien laden, während sie auf dem Bildschirm verwendet werden, und den Rest bei Bedarf streamen. Dies übertrifft die Leistung von Unicode-Bereichen. Wenn Sie unsere Web Fonts API verwenden, profitieren Ihre Nutzer von diesen Verbesserungen der zugrunde liegenden Schriftübertragungstechnologie, sobald sie in ihrem Browser verfügbar sind.

Das ist das Schöne an einer Fonts API: Ihre Nutzer profitieren von jeder neuen Technologieverbesserung, ohne Änderungen an Ihrer Website vornehmen zu müssen. Neues Web-Schriftformat? Kein Problem. Unterstützung für neue Browser oder Betriebssysteme? Das wird erledigt. Anstatt sich mit der Pflege Ihrer Webfonts herumzuschlagen, können Sie sich also auf Ihre Nutzer und Ihre Inhalte konzentrieren.

Variable Schriftarten unterstützen integrierte

Variable Fonts sind Schriftdateien, die eine Reihe von Designvarianten entlang mehrerer Achsen speichern können. Die neue Version der Google Fonts CSS API unterstützt sie. Durch das Hinzufügen einer zusätzlichen Variationsachse wird die Flexibilität einer Schriftart erhöht. Die Größe der Schriftdatei kann dadurch jedoch fast verdoppelt werden.

Wenn Sie Ihre CSS API-Anfrage präzisieren, kann die Google Fonts CSS API nur den Teil der variablen Schriftart bereitstellen, der für Ihre Website benötigt wird, um die Downloadgröße für Nutzer zu reduzieren. Dadurch können variable Schriftarten für das Web verwendet werden, ohne dass lange Seitenladezeiten anfallen. Dazu können Sie einen einzelnen Wert auf einer Achse oder einen Bereich angeben. Sie können sogar mehrere Achsen und mehrere Schriftfamilien in einer Anfrage angeben. Die API ist flexibel und erfüllt Ihre Anforderungen flexibel.

Einfach zu implementieren, für Sie optimiert

Mit der Google Fonts CSS API können Sie Schriftarten bereitstellen, die

  • Bessere Kompatibilität mit Webbrowsern.
  • So klein wie möglich.
  • Schnelle Lieferung.
  • Sie ist für Sie einfacher zu verwenden.

Weitere Informationen zu Google Fonts finden Sie unter fonts.google.com. Weitere Informationen zur CSS API finden Sie in der API-Dokumentation.

Danksagungen

Hero-Image von leesehee.