Schriften auf Webseiten - geht das nachhaltiger?
Nahezu jede Website hat Text. Websichere Schriften sind die nachhaltigste Option, aber nicht immer möglich. Wer externe Schriften einsetzen muss, sollte das richtige Datenformat verwenden und hat auch noch weitere Möglichkeiten, das Datenvolumen zu reduzieren. Eine Optimierung der Schriften ist oft weniger aufwändig als andere Maßnahmen.
Shownotes:
Schriften im Web: Von Times New Roman zu 1,1 Millionen Optionen
Die erste Website der Geschichte – von Tim Berners-Lee – hatte keine Wahl bei der Schrift. Sie zeigte Times New Roman, weil das die installierte Systemschrift war. Bis ins Jahr 2010 nutzten gerade mal 1 % aller Websites eigene Schriftdateien. Heute sind es laut Web Almanac über 83 %. Im Durchschnitt laden Websites dabei 107 KB an Schriftdaten – damit landen Schriften auf Rang 3 hinter Bildern und JavaScript, noch vor CSS und HTML.
Und das bei über 1,1 Millionen verfügbaren Schriften weltweit. Als ich mein Buch schrieb, waren es noch 850.000. Ein Jahr später sind wir bei 1,1 Millionen. Brauchen wir das? Nein. Aber der Status quo trägt dazu bei, dass auf jeder zweiten Website unnötige Schriftdaten mitgeladen werden.
Das richtige Format: WOFF2 ist die klare Empfehlung
Beim Thema Schriftformate gibt es eine eindeutige Antwort: WOFF2 – das Web Open Font Format in der zweiten Generation – ist heute der Standard. Es ist komprimierter als WOFF, TTF oder OTF, wird von rund 98 % aller Browser unterstützt und ist trotzdem noch kein offizieller W3C-Standard. Warum, kann ich nicht sagen.
Was ich sagen kann: Wer noch EOT-Dateien auf seiner Website findet, sollte das Seitentemplate dringend aktualisieren. EOT wurde von Microsoft für den Internet Explorer entwickelt – und den gibt es seit fünf Jahren nicht mehr.
TTF, OTF oder WOFF lassen sich mit kostenlosen Online-Tools problemlos in WOFF2 konvertieren. Die Seite sieht danach genauso aus wie vorher, lädt aber schneller.
Nur einbinden, was wirklich gebraucht wird
Jede Schriftstärke – Regular, Bold, Light – ist eine eigene Datei. 20 bis 50 KB pro Schnitt, manchmal mehr. Ich sehe regelmäßig Websites, die fünf Schriftstärken einbinden und zwei davon tatsächlich verwenden. Der Rest ist Ballast.
Wer viele Schriftstärken braucht, sollte Variable Fonts in Betracht ziehen: eine einzige Datei für alle Gewichtungen. Die Auswahl ist noch überschaubar – bei Google Fonts einfach den Filter „Variable Fonts" setzen – aber als Einstieg reicht sie für viele Projekte.
Icon-Fonts wie Font Awesome würde ich generell nicht empfehlen. Du bindest hunderte Zeichen ein und nutzt zehn davon. Ich bevorzuge SVG-Sprites: Vektorgrafiken, die in einer einzigen Datei gebündelt werden, per CSS farblich steuerbar sind und vom Datenvolumen deutlich besser abschneiden.
Google Fonts: kostenlos, aber nicht umsonst
Wer Google Fonts einbindet, überträgt die IP-Adresse jedes Besuchers an Google. Kostenlos ist hier nicht umsonst – die Daten sind der Preis. In der Regel ist damit auch ein Cookie-Banner Pflicht.
Die saubere Alternative: Google Fonts lokal auf dem eigenen Server hosten. Das ist technisch unkompliziert, löst das DSGVO-Problem vollständig und spart den externen Request. Wer dabei Hilfe braucht, kann sich gerne bei mir melden.
Fallback-Lösungen nicht vergessen
Ein Font-Stack – also eine Reihenfolge von Schriften, auf die der Browser zurückgreift, wenn die erste nicht lädt – gehört auf jede Website. Erst die eigene WOFF2-Schrift, dann eine ähnliche Systemschrift als Fallback.
Das schützt vor zwei Problemen: einem externen CDN, das gerade nicht erreichbar ist, und Besuchern, die Schriften im Browser deaktiviert haben. Auf Mobilgeräten lässt sich das mit dem Firefox Klar Browser testen – er kann Schriften und JavaScript auf einer Seite deaktivieren, ohne Umwege.
Wie du den Ist-Zustand deiner Website prüfst
Der einfachste Einstieg: URL in Digitalbeacon eingeben. Das Tool zeigt sofort, wie viele Schriftdateien geladen werden und wie groß sie sind. Wer tiefer schauen will, findet die Antworten im Quellcode oder in der Browser-Konsole unter dem Netzwerk-Tab.
Schriften haben gegenüber Bildern einen großen Vorteil: Sie sind zentral eingebunden. Eine Änderung im Template wirkt auf der gesamten Website. Das macht die Optimierung von Schriften zu einer der effizientesten Maßnahmen überhaupt – einmal angepackt, dauerhaft wirksam.