Web Fonts sind Schriftarten, die beim Laden einer Website von einem Server übertragen werden, sodass Besucher die Website in der gewünschten Typografie sehen, unabhängig davon, ob die Schrift auf ihrem Gerät installiert ist.
Was bedeutet das?
Bis etwa 2010 konnten Website-Designer nur auf systeminstallierte Schriften zurückgreifen, also auf eine handvoll Fonts wie Arial, Times New Roman oder Georgia, die auf den meisten Computern vorhanden sind. Das änderte sich mit der breiten Browser-Unterstützung der CSS-Anweisung @font-face. Diese erlaubt es, eigene Schriftdateien (WOFF2, WOFF, TTF) auf dem Webserver abzulegen und via CSS einzubinden. Heute liefern Dienste wie Google Fonts, Adobe Fonts oder Bunny Fonts Schriftdateien über ein Content Delivery Network aus.
Das verbreitete Format ist WOFF2 (Web Open Font Format 2), das eine starke Komprimierung bietet und von allen modernen Browsern unterstützt wird. WOFF2-Dateien sind in der Regel 30 bis 40 Prozent kleiner als ihre TTF-Vorläufer, was die Ladezeit spürbar reduziert. Ein Schrift-Stack enthält üblicherweise mehrere Gewichte (Regular, Bold, Italic) und je nach Bedarf zusätzliche Stile, weshalb jede weitere Variante einen separaten HTTP-Request oder eine eigene Datei bedeutet und die Gesamtladezeit steigt.
Ein wichtiges Thema im deutschsprachigen Raum ist die Datenschutzkonformität. Das Einbinden von Google Fonts per externem CDN-Link überträgt die IP-Adresse des Besuchers an Google-Server in den USA. Mehrere deutsche Gerichte haben diese Praxis als DSGVO-widrig eingestuft. Die datenschutzkonforme Lösung ist das Self-Hosting: Sie laden die Schriftdateien herunter und legen sie auf Ihrem eigenen Server ab. Die CSS-Einbindung erfolgt dann per @font-face ohne externe Anfrage an Drittanbieter.
Beispiel aus der Praxis
Eine WordPress-Website nutzt Google Fonts über ein Theme-Setting. Im DSGVO-Audit stellt sich heraus, dass beim Seitenaufruf eine Anfrage an fonts.googleapis.com geht. Die schnellste Abhilfe: Sie laden die benötigten Schriften über google-webfonts-helper.herokuapp.com herunter, legen die WOFF2-Dateien in das Verzeichnis /wp-content/themes/ihr-theme/fonts/ und binden sie per @font-face in der style.css lokal ein. Alternativ bietet das Plugin OMGF diese Umstellung weitgehend automatisiert an.
Tipp aus der Praxis
Beschränken Sie sich auf zwei bis drei Schriftfamilien und maximal vier Gewichte insgesamt. Jede weitere Schrift-Variante verlängert die Ladezeit. Nutzen Sie den CSS-Parameter font-display: swap, damit der Browser beim Laden der Schrift zunächst eine Systemschrift anzeigt und erst nach dem vollständigen Laden des Web Fonts wechselt. Das verhindert das sogenannte Flash of Invisible Text (FOIT) und verbessert den Cumulative Layout Shift (CLS) im Core Web Vitals Score.