Webfont bezeichnet eine Schriftart, die für die Darstellung auf Websites optimiert ist und beim Seitenaufruf vom Server oder einem CDN heruntergeladen wird. Im Unterschied zu Systemschriften wie Arial oder Verdana ist ein Webfont nicht auf dem Gerät des Nutzers installiert: Der Browser lädt die Schriftdatei zusammen mit der Seite und stellt Texte damit auf allen Geräten identisch dar. Technisch ist ein Webfont eine Font-Datei im Format WOFF2 oder WOFF, die per CSS-Regel @font-face eingebunden wird. WOFF2 ist der aktuelle Standard und komprimiert eine typische Schriftdatei auf rund 20 bis 100 Kilobyte pro Schnitt. Die größte kostenlose Quelle ist Google Fonts mit über 1.500 Open-Source-Schriften, dazu kommen Bezahlanbieter wie Adobe Fonts oder MyFonts. Webfonts machen Marken-Typografie im Web erst möglich, kosten aber Ladezeit: Jede zusätzliche Schriftdatei verzögert die Textdarstellung. Formatwahl, Subsetting und font-display gehören deshalb zu jeder sauberen Einbindung dazu.
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.