Webfont bezeichnet eine Schriftart, die für die Verwendung auf Websites optimiert ist und vom Browser heruntergeladen wird. Webfonts ermöglichen es, jede beliebige Schrift auf einer Website einzusetzen – unabhängig davon, welche Schriften auf dem Gerät des Nutzers installiert sind.
Warum Webfonts?
Ohne Webfonts ist eine Website auf Systemschriften wie Arial, Times New Roman oder Verdana beschränkt. Für professionelles Webdesign mit eigener Typografie und einem konsistenten Design System sind Webfonts unverzichtbar.
Webfont-Formate
WOFF2 (Web Open Font Format 2)
Das moderne Standardformat mit der besten Komprimierung. Wird von allen aktuellen Browsern unterstützt und sollte als primäres Format verwendet werden.
WOFF
Der Vorgänger von WOFF2, etwas größere Dateien. Als Fallback für ältere Browser noch relevant.
Variable Fonts
Ein einziges Font-File enthält alle Gewichte und Stile. Statt separate Dateien für Regular, Bold und Light zu laden, liefert ein Variable Font alles in einer Datei – ideal für die Performance.
Webfonts und Performance
Webfonts können die Core Web Vitals erheblich beeinflussen:
FOUT (Flash of Unstyled Text)
Text wird zunächst in einer Systemschrift angezeigt und wechselt zum Webfont, sobald dieser geladen ist. Das verursacht einen sichtbaren Textwechsel.
FOIT (Flash of Invisible Text)
Text bleibt unsichtbar, bis der Webfont geladen ist. Schlimmer als FOUT, da Nutzer keinen Inhalt sehen.
Optimierung
- font-display: swap: Zeigt sofort Systemschrift, tauscht dann zum Webfont
- Preload: Schriften im HTML-Head vorladen:
<link rel="preload" as="font"> - Self-Hosting: Fonts vom eigenen Server statt von Google laden (DSGVO!)
- Subsetting: Nur benötigte Zeichen einbinden (z. B. lateinische Buchstaben)
- Variable Fonts: Eine Datei statt mehrerer Gewichte
Webfonts DSGVO-konform einbinden
Das direkte Laden von Google Fonts über Google-Server überträgt die IP-Adresse des Nutzers an Google – ein DSGVO-Verstoß, der bereits zu Abmahnungen geführt hat. Die Lösung: Fonts herunterladen und lokal vom eigenen Server einbinden.
In Next.js bietet das next/font-Modul automatisches lokales Hosting von Google Fonts mit optimaler Performance.
Schriftwahl und Markenidentität
Die Wahl des Webfonts prägt die Markenwahrnehmung maßgeblich. Serifenlose Schriften wie Poppins oder Inter wirken modern und technisch. Serifenschriften wirken traditionell und vertrauenswürdig. Die Schrift muss zur Marke passen und in allen Gewichten gut lesbar sein.
Für professionelles Webdesign sind Webfonts ein zentrales Gestaltungselement, das Markenidentität vermittelt – bei korrekter Implementierung ohne Performance-Einbußen.