Impuls 33 von 40: Laut Web Almanac laden über 83 % aller Websites externe Schriften. Im Schnitt 107 KB pro Seite – und das ist der Mittelwert. Wer unoptimiert alle Schnitte einer Google-Font-Familie einbindet, landet schnell bei 400 bis 600 KB nur für Schriften. Und das bei jedem Seitenaufruf.

Dabei ist die Lösung oft überraschend einfach.

Sieben Fragen, die jede Website beantworten sollte

Braucht die Website überhaupt eigene Schriften? Systemfonts – also die Schriften, die auf dem Gerät des Nutzers bereits installiert sind – sind beim Thema Datensparsamkeit nahezu unschlagbar. Kein externer Request, kein Ladeverzug, kein DSGVO-Problem. Der Font-Stack system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif deckt alle gängigen Betriebssysteme ab und sieht auf jedem Gerät nativ aus.

Sind die Fonts lokal gehostet? Wer externe Schriften einbinden muss, sollte sie auf dem eigenen Server hosten statt von Google Fonts oder Adobe Fonts laden. Das vermeidet externe Requests, DSGVO-Graubereiche und Latenz durch Drittserver.

Wird WOFF2 verwendet? WOFF2 ist der effizienteste Webfont-Standard und wird von allen modernen Browsern unterstützt. TTF, OTF oder das veraltete EOT für den Internet Explorer haben auf aktuellen Websites nichts mehr verloren.

Wie viele Schnitte werden wirklich genutzt? Jeder Schriftschnitt – Regular, Bold, Italic, Light – ist eine separate Datei. Wer fünf Schnitte lädt und drei davon nutzt, transferiert 40 % der Schriftdaten umsonst. Im DevTools unter „Netzwerk" lässt sich sehen, welche Schnitte tatsächlich auf einer Seite verwendet werden.

Enthält der Zeichensatz nur benötigte Zeichen? Eine Webfont-Datei für alle Sprachen weltweit ist für eine deutschsprachige Website Overkill. Subsetting – die Reduzierung auf tatsächlich verwendete Zeichen – kann die Dateigröße halbieren. Google Fonts bietet das mit dem Parameter &subset=latin direkt an; für selbst gehostete Fonts gibt es Tools wie glyphhanger oder pyftsubset.

Gibt es Variable Fonts als Alternative? Ein Variable Font deckt alle Gewichtungen in einer einzigen Datei ab. Wer viele Schnitte braucht, spart mit einem Variable Font oft erheblich gegenüber mehreren statischen Dateien.

Tipp

Website ohne Webfonts testen: Firefox Klar (mobile) oder die Firefox-Einstellungen (Desktop) erlauben es, Schriften zu deaktivieren. So sieht man sofort, wie die Seite mit Systemfonts aussieht – und ob der Fallback-Stack sinnvoll definiert ist. Überraschung: Bei vielen Websites sieht das kaum anders aus als mit dem teuer geladenen Webfont.

Icon-Fonts: digitale Müllhalde

Font Awesome und ähnliche Icon-Fonts bringen hunderte bis tausende Symbole mit. Verwendet werden davon meist zehn bis zwanzig. Der Rest ist reiner Overhead – geladen, geparst, gecacht, aber nie genutzt.

SVG-Sprites sind die konsequente Alternative: Eine einzige SVG-Datei mit genau den Icons, die auf der Website gebraucht werden. Farblich über CSS steuerbar, verlustfrei skalierbar, oft unter 5 KB. Kein externer Request, kein Zeichensatz-Overhead.

Ich habe auf datensm.art konsequent auf SVG-Sprites umgestellt. Der Unterschied zur vorherigen Icon-Font-Lösung war sofort messbar.

Info

Das Tool Fontaine generiert automatisch optimierte Fallback-Font-Stacks, die den Layout-Shift beim Laden von Webfonts minimieren. Das verbessert nicht nur die Nachhaltigkeit, sondern auch den Core Web Vitals-Wert für CLS (Cumulative Layout Shift) direkt.

Mehr als zwei Schriftarten braucht eine Website in der Regel nicht. Und von diesen beiden reicht meist eine – wenn sie richtig eingebunden ist.

Dieser Tipp ist Teil meiner Serie Digitalfasten ohne Verzicht – 40 Impulse zur Fastenzeit 2026: Zum LinkedIn-Post