Font-Subsetting: Nur laden, was wirklich gebraucht wird

Was Font-Subsetting ist

Font-Subsetting beschreibt den Prozess, aus einer vollständigen Schriftdatei nur die tatsächlich benötigten Glyphen zu extrahieren. Eine Schrift wie Inter enthält über 2.500 Glyphen, die Latein, Kyrillisch, Griechisch, Vietnamesisch und viele weitere Schriftsysteme abdecken. Eine deutschsprachige Website benötigt davon typischerweise 250–350 Zeichen: das lateinische Grundalphabet, deutsche Umlaute (ä, ö, ü, ß), Interpunktion, Ziffern und einige Sonderzeichen.

Das Ergebnis: Eine Font-Datei, die statt 150 KB nur 25–40 KB groß ist. Bei vier bis sechs Schriftschnitten summiert sich die Ersparnis auf mehrere hundert Kilobytes – ein messbarer Performance-Gewinn, besonders auf mobilen Verbindungen.

Unicode-Ranges und Zeichensätze

Der Schlüssel zum effektiven Subsetting ist das Verständnis von Unicode-Ranges. Die relevantesten für europäische Websites:

Basic Latin (U+0020–U+007F) umfasst 95 druckbare Zeichen: das englische Alphabet, Ziffern, Interpunktion und Standardsymbole. Das absolute Minimum für jede westeuropäische Website.

Latin-1 Supplement (U+0080–U+00FF) ergänzt europäische Sonderzeichen: deutsche Umlaute (ä, ö, ü), französische Akzente (é, è, ê, ë), spanische Sonderzeichen (ñ, ¿, ¡) und weitere. Für mehrsprachige EU-Websites unverzichtbar.

Latin Extended-A (U+0100–U+017F) enthält Zeichen für osteuropäische Sprachen: Tschechisch (č, ř, ž), Polnisch (ł, ń, ź), Ungarisch (ő, ű), Rumänisch (ș, ț). Für Organisationen mit osteuropäischen Zielgruppen relevant.

Latin Extended-B (U+0180–U+024F) enthält weitere Sonderzeichen für afrikanische Sprachen und historische Orthografien – wird selten benötigt.

Für eine typische DACH-Website (Deutschland, Österreich, Schweiz) reicht Basic Latin + Latin-1 Supplement aus. Für eine EU-weite Website empfiehlt sich die Einbeziehung von Latin Extended-A.

Werkzeuge und Methoden

pyftsubset (fonttools)

Das Python-basierte pyftsubset ist das mächtigste Kommandozeilen-Tool für Font-Subsetting:

pyftsubset InterVariable.woff2 
  --output-file=inter-subset.woff2 
  --flavor=woff2 
  --layout-features='*' 
  --unicodes="U+0020-007F,U+00A0-00FF,U+0100-017F,U+2000-206F"

Die Option --layout-features='*' behält alle OpenType-Features bei (Ligaturen, Kerning, Tabular Figures). Das ist wichtig, weil ein Subset ohne OpenType-Features typografisch beschädigt wäre.

Glyphhanger

glyphhanger (von Zach Leatherman) analysiert eine Website oder HTML-Datei und generiert automatisch die minimale Unicode-Range:

npx glyphhanger https://example.com --subset=InterVariable.woff2

Das Tool crawlt die angegebene URL, identifiziert alle verwendeten Zeichen und erstellt ein optimales Subset. Für Design Systeme besonders nützlich: Es kann gegen die Dokumentation und Beispielseiten laufen, um sicherzustellen, dass alle in der Praxis verwendeten Zeichen enthalten sind.

Fontsource mit automatischem Subsetting

Fontsource bietet Schriften bereits in vorgefertigten Subsets an. Bei der Installation wird nur das benötigte Subset geladen:

import '@fontsource-variable/inter/latin.css';    // Nur Latin
import '@fontsource-variable/inter/latin-ext.css'; // Latin + Extended

CSS unicode-range: Intelligentes Laden

Die CSS-Property unicode-range ermöglicht es, dem Browser mitzuteilen, welche Zeichen eine Font-Datei enthält. Der Browser lädt die Datei nur dann, wenn tatsächlich Zeichen aus diesem Range auf der Seite vorkommen:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0020-007F, U+00A0-00FF;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-017F;
  font-display: swap;
}

In diesem Beispiel wird inter-latin-ext.woff2 nur geladen, wenn die Seite tatsächlich Zeichen aus dem Extended-Latin-Bereich enthält. Für mehrsprachige Websites ist das ein eleganter Weg, um die initiale Ladezeit für die Hauptsprache minimal zu halten und Zeichen für weitere Sprachen bei Bedarf nachzuladen.

Subsetting in der Build-Pipeline

Für Design Systeme sollte Font-Subsetting in die Build-Pipeline integriert werden, nicht manuell durchgeführt:

Vite-Plugin: vite-plugin-webfont-dl oder ein Custom-Plugin, das pyftsubset beim Build aufruft.

PostCSS: Plugins wie postcss-font-grabber können Fonts automatisch herunterladen und lokal speichern.

CI/CD: Ein Build-Schritt, der vor dem Deployment die Font-Dateien optimiert und Subsets erstellt.

Die Automatisierung stellt sicher, dass Subsets bei jeder Aktualisierung der Schrift oder der Sprachabdeckung neu generiert werden – ohne manuelle Intervention.

Risiken und Fallstricke

Fehlende Zeichen sind das größte Risiko beim Subsetting. Wenn ein Subset zu aggressiv ist, fehlen Zeichen wie Anführungszeichen („”), Gedankenstriche (–), Auslassungspunkte (…) oder Währungssymbole (€, £, ¥). Der Browser fällt dann auf eine System-Fallback-Schrift zurück, was zu sichtbaren Inkonsistenzen führt.

OpenType-Features können durch Subsetting beschädigt werden. Kerning-Paare, die Zeichen referenzieren, die nicht im Subset enthalten sind, werden entfernt. Kontextuelle Ligaturen können brechen. Die Lösung: --layout-features='*' bei pyftsubset beibehalten und nach dem Subsetting visuell prüfen.

Dynamische Inhalte wie User-generierte Texte, CMS-Inhalte in verschiedenen Sprachen oder internationalisierte UI-Texte erfordern breitere Subsets als statische Websites. Hier bietet unicode-range mit mehreren Font-Dateien die flexibelste Lösung.

Kernpunkte

• Font-Subsetting entfernt nicht benötigte Glyphen und reduziert Dateigrößen typischerweise um 60–80 %.
• Für DACH-Websites reichen Basic Latin + Latin-1 Supplement; EU-weit ist Latin Extended-A empfehlenswert.
• Unicode-range in CSS ermöglicht progressives Laden: Hauptsprache sofort, weitere Sprachen bei Bedarf.
• pyftsubset und Glyphhanger sind die wichtigsten Werkzeuge – Subsetting sollte in die Build-Pipeline integriert werden.
• OpenType-Features müssen beim Subsetting bewahrt werden, sonst leidet die typografische Qualität.
• Dynamische Inhalte und mehrsprachige Websites erfordern breitere Subsets als statische Seiten.
• Kombiniert mit Variable Fonts und Self-Hosting ergibt Font-Subsetting die optimale Font-Infrastruktur.