Eine API für schnelle, ansprechende Webschriftarten

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

Jimmy Mooney

Im Laufe der Jahre hat sich durch die Technologie für Webschriftarten viel verändert. Was früher eine Nischenpraxis war und ein Bild mit Text oder ein Flash-Plug-in erforderte (und das die Suchmaschinenoptimierung deiner Website beeinträchtigt hat), ist heute im Web zur Standardmethode geworden. Früher mussten Sie vor dem Laden der Seite eine ganze Schriftart laden – mit Stilen und Zeichen, die Sie vielleicht noch gar nicht verwendet haben – aber selbst das gehört der Vergangenheit an.

Die Google Fonts CSS API hat sich im Laufe der Jahre ebenfalls weiterentwickelt, um mit den Änderungen in der Technologie für Webschriftarten Schritt zu halten. Von seinem ursprünglichen Wertversprechen hat sich ein langer Weg entwickelt: Wir möchten das Web schneller machen, da Ihr Browser gängige Schriftarten für alle Websites, die das API verwendet haben, im Cache speichern kann. Das trifft nicht mehr zu, aber die API bietet weiterhin zusätzliche und wichtige Optimierungen, damit Websites schnell geladen werden und die Schriftarten gut funktionieren.

Mit der Google Fonts CSS API können auf Ihrer Website nur die erforderlichen Schriftartdaten angefordert werden. So bleibt die CSS-Ladezeit auf ein Minimum reduziert. So können Websitebesucher Ihre Inhalte so schnell wie möglich laden. Die API antwortet auf jede Anfrage mit der für diesen Webbrowser am besten geeigneten Schriftart.

Dazu muss nur eine einzige HTML-Zeile in Ihren Code eingefügt werden.

Google Fonts CSS API verwenden

Die Dokumentation zur Google Fonts CSS API fasst es gut zusammen:

Sie müssen nichts weiter programmieren. Sie müssen lediglich einen speziellen Stylesheet-Link zu Ihrem HTML-Dokument hinzufügen und dann auf die Schriftart in einem CSS-Stil verweisen.

Sie müssen mindestens eine Zeile in Ihren HTML-Code einfügen. Das sieht dann so aus:

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

Wenn Sie eine Schriftart von der API anfordern, geben Sie die gewünschte(n) Familie(en) und optional deren Stärken, Stile, Teilmengen und viele weitere Optionen an. Die API verarbeitet Ihre Anfrage dann auf eine von zwei Arten:

  1. Wenn in Ihrer Anfrage allgemeine Parameter verwendet werden, für die die API bereits Dateien hat, wird dem Nutzer sofort CSS zurückgegeben und er zu diesen Dateien weitergeleitet.
  2. Wenn Sie eine Schriftart mit Parametern anfordern, die von der API derzeit nicht im Cache gespeichert sind, werden Ihre Schriftarten im Handumdrehen mithilfe von HarfBuzz unterteilt und CSS-Code zurückgegeben, der auf sie verweist.

Schriftartdateien können groß sein, das ist aber nicht zwingend erforderlich.

Web-Schriftarten können sehr groß sein; das stimmt. Schon ein einziges Gewicht von Noto Sans Japanese in WOFF2 beträgt fast 3,4 MB.Das Herunterladen dieser Datei für jeden einzelnen Nutzer würde die Ladezeit Ihrer Seite erheblich verkürzen. Wenn jede Millisekunde zählt und jedes Byte wertvoll ist, sollten Sie sicherstellen, dass Sie nur die Daten laden, die Ihre Nutzenden benötigen.

Mit der Google Fonts CSS API können sehr kleine Schriftartdateien (sogenannte Teilmengen) in Echtzeit generiert werden, um Nutzern nur den Text und die Stile bereitzustellen, die für Ihre Website erforderlich sind. 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 der Zeichenzahl für einfache lateinische, einfache griechisch und erweiterte griechisch.

Die CSS API bietet Ihren Nutzern außerdem weitere automatische Optimierungen von Webschriftarten ohne API-Parameter. Die API stellt Ihren Nutzern CSS-Dateien zur Verfügung, in denen unicode-range bereits aktiviert ist (sofern dies vom Webbrowser unterstützt wird). Dadurch werden die Schriftarten nur für die Zeichen geladen, die Ihre Website benötigt.

Der CSS-Deskriptor unicode-range ist ein Tool, mit dem große Downloads von Schriftarten bekämpft werden können. Diese CSS-Eigenschaft legt einen Bereich von Unicode-Zeichen fest, der in der @font-face-Deklaration enthalten ist. Wird eines dieser Zeichen auf der Seite gerendert, wird die Schriftart heruntergeladen. Das funktioniert in allen Sprachen, d. h., Sie können eine Schriftart verwenden, die lateinische, griechische oder kyrillische Zeichen umfasst, und kleinere Teilmengen bilden. Im obigen Diagramm sehen Sie, dass es bei einem Laden dieser drei Zeichensätze mehr als 600 Glyphen wären.

Ein Diagramm mit der Anzahl der Zeichen in lateinischen, erweiterten lateinischen, koreanischen und japanischen Schriftzeichen.

Dadurch werden auch chinesische, japanische und koreanische Schriftarten (CJK) für das Web aktiviert. Im obigen Diagramm sehen Sie, dass eine CJK-Schriftart 15- bis 20-mal so viele Zeichen wie eine lateinische Schriftart umfasst. Diese Schriftarten sind in der Regel sehr groß und viele der Zeichen in diesen Sprachen werden nicht so oft verwendet wie andere.

Wenn Sie die CSS API und „unicode-range“ verwenden, können Dateiübertragungen um ungefähr 90% reduziert werden. Mit dem Deskriptor unicode-range kannst du jeden Teil separat definieren. Jedes Segment wird erst heruntergeladen, wenn dein Inhalt eines der Zeichen in diesen Zeichenbereichen enthält.

Beispiel: Wenn Sie in Noto Sans JP nur das Wort „こんんちち“ festlegen möchten, können Sie Folgendes tun:

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

Diagramm mit einem Vergleich verschiedener Methoden zum Herunterladen von Noto Sans JP.

In diesem Beispiel sehen Sie, dass Sie mit der CSS API bereits 97,5% im Vergleich zum Selbsthosting der WOFF2-Schriftart sparen, da die API die Unterteilung großer Schriftarten in Unicode-Bereich unterstützt. Wenn Sie noch einen Schritt weiter gehen und genau den Text angeben, der angezeigt werden soll, können Sie die Größe der Schriftart auf nur 95,3% der CSS API-Schriftart reduzieren, also 99,9% kleiner als die selbst gehostete Schriftart.

Über die Google Fonts CSS API werden automatisch Schriftarten in dem kleinsten und kompatiblen Format bereitgestellt, das vom Browser des Nutzers unterstützt wird. Wenn Ihr Nutzer einen Browser mit WOFF2-Unterstützung verwendet, stellt das API die Schriftarten in WOFF2 bereit. Falls er jedoch einen älteren Browser verwendet, stellt das API die Schriftarten in einem Format bereit, das von diesem Browser unterstützt wird. Um die Dateigröße für jeden Nutzer zu verringern, entfernt die API auch Daten aus den Schriftarten, wenn sie nicht benötigt werden. Beispielsweise werden Hinweisdaten für Nutzer entfernt, deren Browser die Daten nicht benötigen.

Zukunftssichere Webschriftarten mit der Google Fonts CSS API

Das Google Fonts-Team leistet außerdem einen Beitrag zu neuen W3C-Standards, durch die Webfont-Technologien wie WOFF2 kontinuierlich an Innovationen beitragen. Ein aktuelles Projekt ist die Inkrementelle Font Transfer-Funktion, mit der Nutzer sehr kleine Teile von Schriftarten laden können, die auf dem Bildschirm verwendet werden, und den Rest on demand streamen. Damit lässt sich die Leistung von Unicode-Bereichen deutlich übertreffen. Wenn Sie unsere Web Fonts API verwenden, erhalten Ihre Nutzer diese Verbesserungen der zugrunde liegenden Schriftartübertragungstechnologie, sobald sie in ihrem Browser verfügbar sind.

Das ist das Schöne an der Fonts API: Ihre Nutzer profitieren von jeder neuen Technologieverbesserung, ohne dass Änderungen an Ihrer Website erforderlich sind. Neues Webschriftformat? Kein Problem. Unterstützung für neue Browser oder Betriebssysteme? Wir kümmern uns darum. Anstatt sich mit der Verwaltung Ihrer Webschriftarten ins Stocken zu bringen, können Sie sich ganz auf Ihre Nutzer und Ihren Content konzentrieren.

Variable Schriftarten unterstützen integrierte

Variable Schriftarten sind Schriftartdateien, in denen verschiedene Designvarianten für mehrere Achsen gespeichert werden können. Diese werden von der neuen Version der Google Fonts CSS API unterstützt. Durch das Hinzufügen einer zusätzlichen Variantenachse wird die Schriftart noch flexibler, wobei sich die Größe der Schriftartdatei fast verdoppeln kann.

Wenn Sie in Ihrer CSS API-Anfrage genauere Angaben machen, kann die Google Fonts CSS API nur den Teil der Variablen Schriftart bereitstellen, die für Ihre Website erforderlich ist, um die Downloadgröße für die Nutzer zu reduzieren. So können variable Schriftarten für das Web verwendet werden, ohne lange Seitenladezeiten zu verursachen. 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 einzigen Anfrage angeben. Die API lässt sich flexibel an Ihre Anforderungen anpassen.

Einfache Implementierung, für Sie optimiert

Mit der Google Fonts CSS API können Sie Schriftarten auf folgende Weise bereitstellen:

  • Bessere Kompatibilität mit Webbrowsern.
  • So klein wie möglich.
  • Schnell geliefert.
  • 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.