Was ist ein Webfont?

Ein Webfont ist eine Schriftart, die beim Aufrufen einer Website über das Internet geladen wird. Im Gegensatz zu Systemschriften, die auf dem Computer des Nutzers installiert sein müssen, kann ein Webfont auf jedem Gerät exakt gleich dargestellt werden.

Das klingt nach einer technischen Selbstverständlichkeit, war es lange Zeit aber nicht. Früher waren Website-Designer auf Systemschriften wie Arial, Times New Roman oder Georgia beschränkt, weil nur diese Schriften auf den meisten Computern sicher vorhanden waren. Webfonts durchbrachen diese Einschränkung: Heute kann jede Schriftart auf einer Website verwendet werden, solange sie als Datei eingebunden oder über einen Dienst geladen wird.

Wie Webfonts eingebunden werden

Der bekannteste Webfont-Dienst ist Google Fonts, der tausende kostenlose Schriftarten anbietet. Eine einfache Einbindung per Link-Tag im HTML-Head reicht, und die Schriftart wird vom Google-Server geladen. Das ist bequem, hat aber zwei Nachteile: Der Browser muss eine externe Verbindung zu Google herstellen, was die Ladezeit marginal erhöht, und es entstehen DSGVO-Fragen, weil Nutzer-IP-Adressen an Google übermittelt werden.

Die sicherere Alternative ist das Self-Hosting: Die Schriftartdateien werden auf dem eigenen Server gespeichert und von dort geladen. Kein externer Dienst, keine Datenschutzprobleme, volle Kontrolle. Das Format WOFF2 ist heute der Standard und bietet gute Komprimierung bei breiter Browser-Unterstützung.

Performance ist beim Webfont-Einsatz ein relevantes Thema. Jede Schriftart ist eine zusätzliche Datei, die geladen werden muss. Wer drei verschiedene Schriften in jeweils vier Schriftschnitten (Regular, Bold, Italic, Bold Italic) lädt, verlangsamt die Seite. Die Faustregel: maximal zwei bis drei Schriftarten, nur die wirklich verwendeten Schriftschnitte laden.

Beim Laden von Webfonts kann der sogenannte FOUT (Flash of Unstyled Text) auftreten: Der Browser zeigt kurz Text in einer Fallback-Schrift an, bevor der Webfont geladen ist. Mit font-display: swap lässt sich dieses Verhalten steuern.

Wenn du ein neues Webprojekt planst und Fragen zur Typografie und Performance-Optimierung hast, beraten wir dich gerne. Schau dir unsere Webdesign-Leistungen an oder buche einen kostenlosen Termin.