Font Subsetting: Schriften optimieren & Page Speed steigern

Was ist Font Subsetting? Eine Definition

Unter Font Subsetting versteht man den Prozess, aus einer vollständigen Schriftdatei eine reduzierte "Teilschrift" (das Subset) zu erstellen. Dabei werden nur die Zeichen (Glyphen) in einer neuen Datei gespeichert, die tatsächlich für die Website benötigt werden. Anstatt eine universelle Datei mit tausenden Sonderzeichen für hunderte Sprachen zu laden, extrahiert man lediglich den benötigten Zeichensatz: zum Beispiel nur lateinische Buchstaben, Ziffern und Satzzeichen.

Warum Font Subsetting? Der Einfluss auf Page Speed und Core Web Vitals

Bei der Optimierung der Website-Performance achten viele zuerst auf Mediendateien oder versuchen, die Bundlegröße zu reduzieren. Dabei gerät jedoch oft eine einfache und äußerst wirkungsvolle Maßnahme in Vergessenheit: Font Subsetting. Dieser vergleichsweise unkomplizierte Prozess kann die Dateigröße einer Website deutlich verringern und so die Page Speed sowie die Core Web Vitals spürbar verbessern.

Beim Font Subsetting beschränkt man die Schriftdatei auf die tatsächlich benötigten Zeichen, meist die der Hauptsprache der Website, und entfernt alle überflüssigen Glyphen. Zusätzlich kann man eine vollständige oder erneut komprimierte Version der Schriftart als Fallback bereitstellen, um sicherzustellen, dass bei Bedarf alle Zeichen geladen werden können.

Die Anatomie einer Schriftdatei: Warum sie oft unnötig groß ist

Wenn man eine Font beispielsweise über Google Fonts herunterlädt und verwendet, bekommt man nicht nur die Buchstaben (A-Z) und Ziffern, sondern ein "Rundum-Sorglos-Paket" mit sehr vielen Features.

Folgende "Pakete" sind in einer Schriftdatei meistens enthalten:

• nicht nur lateinische Buchstaben findet man, sondern auch Kyrillisch, Griechisch, Vietnamesisch und hunderte Sonderzeichen

• alternative Zeichenformen (Stylistic Alternates), Ligaturen, Small Caps, Brüche, Tabellensatz-Ziffern und mehr.

• Variable Fonts bündeln viele Gewichte und Stile, die man am Ende nicht in seinem Design benötigt

Diese ganzen Features sorgen dafür, dass die Datei am Ende riesig ist und nicht optimal zu gebrauchen ist auf einer Webseite.

Schritt-für-Schritt-Anleitung: So erstellst du ein Subset

Es gibt viele Methoden, um ein Subset zu generieren, jedoch werde ich hier nur meinen eigenen präferierten Weg erläutern:

1. Besuche den Webfont Generator von fontsquirrel.

2. Lade deine Font hoch

3. Entweder "Optimal" (reicht meistens) oder auf "Expert" und dort seine Einstellungen treffen

4. Subset herunterladen

Implementierung auf der Website: @font-face und font-display optimal nutzen

Mit font-face Regel kann man über CSS die Font auf seiner Webseite implementieren.

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff2") format("woff2");
font-weight: number;
font-display: "string";
}

Die Wichtigen Properties sind in dem Fall font-family, src, font-weight und font-display. Der Name, welcher bei font-family gesetzt ist, ist relevant um es dann anschließend im CSS zu benutzen, sodass dann auch die richtige Font referenziert wird.

Bei der src muss man den lokalen Pfad angeben, sowie das Format. Auf meisten Webseiten reicht es nur mit WOFF2 zu arbeiten, da es zu 96,38% der Browser abdeckt.

font-weight ist das respektive Gewicht der Font für normale bzw. Regular Schriftarten wäre es beispielsweise 400. Eine Übersicht findet ihr hier:

Quelle: Words of Type

Fazit: Kleine Datei, große Wirkung für die User Experience

Font Subsetting ist ein vergleichsweise kleiner Eingriff in den Code, der eine spürbar große Wirkung auf die User Experience hat. Indem du nur die wirklich benötigten Zeichen und Schriftschnitte auslieferst, reduzierst du die Font-Dateigröße deutlich und damit auch Ladezeit, Datenverbrauch und das Risiko von Layout-Verschiebungen. Gleichzeitig behältst du mit einem sinnvollen Fallback-Setup die volle Funktionalität für Sonderfälle und zusätzliche Sprachen. So kombinierst du saubere Typografie mit moderner Performance-Optimierung, eine der seltenen Maßnahmen, die sowohl Entwickler als auch Nutzer und Suchmaschinen gleichermaßen freuen.