Web Fonts optimieren: Ladezeiten senken und Layout-Shifts vermeiden
Schriftarten (Web Fonts) tragen massgeblich zum visuellen Erscheinungsbild einer B2B-Website bei. Falsch eingebunden verlangsamen sie jedoch das Rendern des Textes (Time to Interactive) und führen zu unschönen Sprüngen im Layout (Cumulative Layout Shift - CLS). Eine systematische Schriftarten-Optimierung sichert exzellente Ladezeiten unter Einhaltung strenger Datenschutzrichtlinien.
Schriften sind häufig render-blockierende Ressourcen: Sie verzögern sowohl den Largest Contentful Paint als auch – bei spätem Austausch – die Layout-Stabilität. Wer sie richtig einbindet, verbessert gleich mehrere Core Web Vitals auf einmal.
Datenschutzkonformität: Das Aus für externe Google Fonts
Historisch war es üblich, Schriftarten über externe CDNs (wie fonts.googleapis.com) einzubinden.
- Das Problem: Bei jedem Seitenaufruf kontaktiert der Browser Google-Server, um die Schriftart zu laden. Dabei wird die IP-Adresse des Nutzers übertragen. Schweizer Gerichte und europäische Datenschutzbehörden haben dies als Datenschutzverletzung eingestuft.
- Die Lösung: Self-Hosting (Lokales Laden). Laden Sie die Schriftdateien herunter und liefern Sie diese direkt über Ihren eigenen Webserver aus (so wie wir es bei allerate.com über
@fontsource/intertun). Dies macht die Website datenschutzkonform und spart zudem den DNS-Verbindungsaufbau zu externen Servern.
Performance-Optimierung von Web Fonts
Um Ladezeitverzögerungen und das Flackern von Texten zu verhindern, sollten Sie folgende drei Best Practices anwenden:
1. Nur das WOFF2-Format ausliefern
Verwenden Sie ausschliesslich das hochkomprimierte WOFF2-Format. Ältere Formate (TTF, EOT) blähen die Dateigrösse unnötig auf.
- CSS-Syntax:
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/inter-regular.woff2') format('woff2');
}
2. Layout-Shifts verhindern mit font-display: swap
Fügen Sie in jeder @font-face-Regel die Eigenschaft font-display: swap; hinzu.
- Die Wirkung: Der Browser blockiert das Zeichnen des Textes nicht, wenn die Schriftdatei noch geladen wird. Er stellt den Text sofort in einer lokalen Systemschrift dar (z. B. Arial oder Helvetica) und tauscht diese aus (Swap), sobald die WOFF2-Datei bereitsteht. Dies verhindert, dass Text beim Laden unsichtbar bleibt (FOIT - Flash of Invisible Text).
3. Kritische Schriftarten vorab laden (Preloading)
Damit der Browser die wichtigsten Schnitte (z. B. Regular für den Fliesstext und Bold für Überschriften) sofort lädt, fügen Sie einen Preload-Link in den HTML-<head> ein. Das Attribut crossorigin ist hierbei zwingend erforderlich:
<link rel="preload" href="/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin>
Schriftformate im Vergleich
Nicht jedes Format gehört noch auf eine moderne Website. Diese Tabelle zeigt, welche Formate heute relevant sind:
| Format | Komprimierung | Browser-Support | Empfehlung |
|---|---|---|---|
| WOFF2 | sehr hoch (Brotli) | alle modernen Browser | ausschliesslich nutzen |
| WOFF | mittel | sehr breit, inkl. alt | nur als Fallback für sehr alte Browser |
| TTF/OTF | keine (unkomprimiert) | breit | vermeiden – zu gross |
| EOT/SVG | gering | veraltet (IE/alt) | nicht mehr verwenden |
Für praktisch jedes B2B-Projekt reicht heute WOFF2 allein. Der Verzicht auf Fallback-Formate spart Markup und vermeidet doppelte Downloads.
font-display-Strategien im Überblick
Der Wert von font-display entscheidet, wie der Browser mit noch nicht geladenen Schriften umgeht:
| Wert | Verhalten | Eignung |
|---|---|---|
swap | sofort Systemschrift, dann Austausch | Standard für Fliesstext (kein FOIT) |
optional | nutzt Webschrift nur, wenn quasi sofort da | beste CLS-Werte, ideal bei knapper Bandbreite |
fallback | kurze Blockierung, dann Fallback | Kompromiss |
block | bis zu 3 s unsichtbar (FOIT) | nur für Icon-Fonts vertretbar |
Vorher/Nachher: Eine Landingpage entschlacken
Eine Marketing-Seite bindet vier Schriftschnitte über ein externes CDN ein:
- Vorher: Vier TTF-Dateien (je ~120 KB) werden von
fonts.googleapis.comgeladen. Es folgt ein zusätzlicher DNS-Lookup und ein TLS-Handshake zu einem Fremdserver. Der Text bleibt rund 800 ms unsichtbar (FOIT), CLS springt beim späten Austausch auf 0,18. - Nachher: Die zwei tatsächlich genutzten Schnitte (Regular, Bold) werden als auf Latein subgesetzte WOFF2-Dateien (je ~18 KB) selbst gehostet, mit
font-display: swapund Preload für den Regular-Schnitt. Der DNS-Lookup zum Fremdserver entfällt. - Ergebnis: Der Text ist sofort lesbar, der übertragene Schrift-Payload sinkt von ~480 KB auf ~36 KB, CLS fällt auf < 0,02 und der LCP verbessert sich messbar.
In Kombination mit korrekten Cache-Headern (Schriften sind unveränderlich und sollten mit max-age=31536000, immutable ausgeliefert werden) laden Schriften bei Wiederbesuchen gar nicht mehr neu.
[!TIP] Die lokale Bereitstellung und das Preloading von WOFF2-Schriften sind unverzichtbare Massnahmen für eine schnelle Textdarstellung. Prüfen Sie die Schriftauslastung Ihrer Website mit dem PageSpeed Check auf balou.tools.
Häufig gestellte Fragen (FAQ)
Warum sollte man Google Fonts lokal hosten?
Das direkte Einbinden von Google-Servern überträgt die IP-Adresse des Besuchers ohne dessen Zustimmung an Google in die USA. Dies verstösst gegen das Schweizer Datenschutzgesetz (DSG) und die EU-DSGVO. Lokales Hosten löst dieses Problem komplett.
Was ist WOFF2?
WOFF2 (Web Open Font Format 2.0) ist der moderne Standard für Webschriften. Es bietet eine ca. 30 % stärkere Komprimierung als das ältere WOFF-Format. Andere Formate wie TTF, EOT oder SVG sind veraltet und werden im Web nicht mehr benötigt.
Was ist der Unterschied zwischen FOIT und FOUT?
FOIT (Flash of Invisible Text) bedeutet, dass der Text unsichtbar bleibt, bis die Webschrift geladen ist – schlecht für die wahrgenommene Geschwindigkeit. FOUT (Flash of Unstyled Text) zeigt den Text sofort in einer Systemschrift und tauscht ihn dann aus. `font-display: swap` erzwingt FOUT, was fast immer die bessere Nutzererfahrung ist, weil Inhalt sofort lesbar ist.
Wie reduziert man die Dateigrösse von Schriften zusätzlich?
Durch Subsetting: Dabei werden alle nicht benötigten Zeichen (z. B. kyrillische oder asiatische Glyphen) aus der Schriftdatei entfernt. Eine auf Lateinisch reduzierte WOFF2-Datei ist oft nur ein Bruchteil so gross wie die Vollversion und lädt entsprechend schneller.