Webfonts
Was sind Webfonts?
Webfonts sind Schriftarten, die eine Website beim Aufruf als separate Dateien lädt und im Browser darstellt. Dadurch erscheint die gewünschte Typografie unabhängig von den lokal installierten Schriften des Nutzers. Dateiformat, Umfang, Speicherort und Ladeverhalten beeinflussen dabei die Darstellung, die Ladezeit und die visuelle Stabilität der Seite.
Webfonts, auf Deutsch Webschriften, geben Websites ein einheitliches Schriftbild auf Smartphones, Tablets und Desktop-Geräten. Der Browser lädt dafür Schriftdateien vom eigenen Webserver oder von einem externen Anbieter. Anschließend verwendet das CSS der Seite diese Dateien für Überschriften, Navigationselemente und Fließtext.
Wie funktionieren Webfonts?
Webfonts werden meist über die CSS-Regel @font-face eingebunden. Diese Regel enthält den Namen der Schriftfamilie, den Speicherort der Datei sowie Angaben zu Schriftstärke und Schriftschnitt. Der Browser ruft jede benötigte Datei über eine eigene Anfrage ab, sofern sie nicht bereits im Browser-Cache gespeichert ist.
Eine einfache Einbindung kann beispielsweise so aussehen:
@font-face { font-family: 'Beispiel'; src: url('/fonts/beispiel.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
Jede tatsächlich verwendete Kombination aus Schriftstärke und Schriftschnitt benötigt eine passende Datei oder einen entsprechenden Bereich innerhalb einer variablen Schrift. Drei Schriftstärken in normaler und kursiver Ausführung können deshalb sechs separate Dateien erzeugen. Prüfe im Netzwerkprotokoll des Browsers, welche Dateien wirklich geladen werden und welche Schriftschnitte sich entfernen lassen.
Formate für Webfonts im Vergleich
Für moderne Websites wird überwiegend WOFF2 verwendet. Das Format ist speziell für die Übertragung im Web ausgelegt und komprimiert Schriftinformationen effizient. WOFF kann als Alternative für ältere Browser dienen. TTF und OTF sind klassische Schriftformate, erzeugen im Web aber häufig größere Übertragungsmengen als eine entsprechend aufbereitete WOFF2-Datei.
| Format | Typischer Einsatz | Einordnung |
|---|---|---|
| WOFF2 | Moderne Websites | Hohe Kompression und breite Unterstützung in aktuellen Browsern |
| WOFF | Kompatibilität mit älteren Browsern | Größere Dateien als WOFF2 |
| TTF | Desktop und ältere Webprojekte | Für aktuelle Websites meist nicht die effizienteste Auslieferung |
| OTF | Professionelle Typografie und Desktop | Kann umfangreiche typografische Funktionen enthalten |
| Variable Font | Mehrere Stärken oder Breiten in einer Datei | Kann mehrere statische Dateien ersetzen |
Webfonts und PageSpeed
Webfonts beeinflussen den PageSpeed, weil der Browser zusätzliche Dateien herunterladen, entpacken und für die Textdarstellung verarbeiten muss. Liegt eine Schrift auf einem externen Server, können außerdem Verbindungsaufbau, DNS-Auflösung und TLS-Aushandlung hinzukommen. Eine kleine Zahl gezielt ausgewählter WOFF2-Dateien reduziert diese Arbeit gegenüber einer umfangreichen Sammlung ungenutzter Schriftschnitte.
Der häufige Denkfehler lautet, eine einzelne kleine Schriftdatei könne den Seitenaufbau kaum verändern. Entscheidend ist jedoch die gesamte Ladekette. Werden vier Schriftdateien nacheinander entdeckt, blockiert CSS ihre Erkennung oder wartet der Browser auf einen externen Anbieter, kann sichtbarer Text später erscheinen. Prüfe deshalb nicht nur die Dateigröße, sondern auch Startzeit, Dauer und Priorität jeder Schriftanfrage.
Font Display steuert die Darstellung
Die CSS-Eigenschaft font-display bestimmt, wie Text während des Ladens einer Schrift erscheint. Bei swap zeigt der Browser zunächst eine Ersatzschrift und tauscht sie nach dem Download aus. block kann Text vorübergehend unsichtbar lassen. optional erlaubt dem Browser, unter ungünstigen Bedingungen vollständig auf die Webfont zu verzichten.
Ein sichtbarer Schriftwechsel wird als FOUT bezeichnet, kurz für Flash of Unstyled Text. Vorübergehend unsichtbarer Text heißt FOIT, kurz für Flash of Invisible Text. Beide Effekte betreffen die Wahrnehmung der Ladezeit. Zusätzlich kann ein Wechsel zwischen Ersatzschrift und Webfont Layoutverschiebungen auslösen, wenn Zeichenbreite, Zeilenhöhe oder Buchstabenabstände deutlich voneinander abweichen.
Webfonts für SEO optimieren
Webfonts sind kein eigenständiger Rankingfaktor. Ihre technische Umsetzung kann jedoch Ladezeit, Largest Contentful Paint und Cumulative Layout Shift beeinflussen. Diese Messwerte gehören zur Bewertung der Nutzererfahrung. Eine schnelle Textdarstellung unterstützt außerdem die Lesbarkeit von Landingpages, Produktseiten und redaktionellen Inhalten.
Preloading gibt einer Ressource eine hohe Ladepriorität, macht eine überflüssige Datei aber nicht schneller. Wird eine Schrift vorgeladen, die auf der sichtbaren Seite gar nicht verwendet wird, konkurriert sie mit Bildern, CSS und JavaScript um Bandbreite. Nutze preload deshalb nur für Schriften, die unmittelbar im sichtbaren Bereich benötigt werden.
Webfonts richtig messen
Messbar ist die Wirkung von Webfonts über einen Vorher-nachher-Vergleich derselben URL unter vergleichbaren Bedingungen. Kontrolliere dabei die Zahl der Schriftanfragen, ihre gesamte Übertragungsgröße, den Zeitpunkt der Textdarstellung und mögliche Layoutverschiebungen. Der kostenlose Ladezeiten-Check liefert dafür eine PageSpeed-Analyse mit konkreten Handlungsempfehlungen.
Prüfe die Ladezeit deiner Website direkt im Artikel:
Hosting und Abgrenzung
Selbst gehostete Webfonts liegen auf derselben technischen Infrastruktur wie die Website. Extern gehostete Webfonts werden von einer anderen Domain geladen. Eigenes Hosting ermöglicht eine direkte Kontrolle über Dateien, Cache-Regeln, Formate und Verfügbarkeit. Bei externem Hosting hängt die Auslieferung zusätzlich von der Erreichbarkeit und Konfiguration des Drittanbieters ab.
Der Unterschied zwischen Webfonts und Systemfonts liegt in der Übertragung. Systemfonts sind bereits auf dem Gerät vorhanden und benötigen keine Schriftdatei vom Webserver. Ihre Darstellung kann sich jedoch je nach Betriebssystem unterscheiden. Webfonts schaffen ein konsistenteres Design, verursachen dafür zusätzliche Netzwerk- und Verarbeitungsarbeit.
Icon Fonts enthalten Symbole anstelle klassischer Buchstaben. Sie werden technisch wie Schriften geladen, sind für einzelne Icons aber oft unnötig umfangreich. SVG-Dateien ermöglichen eine gezieltere Auslieferung einzelner Symbole und lassen sich unabhängig von einer Schriftdatei skalieren und gestalten.
Typische Fehler bei Webfonts
Ein häufiger Fehler ist das Laden vollständiger Schriftfamilien, obwohl die Website nur zwei Schriftschnitte verwendet. Weitere Probleme entstehen durch doppelte Einbindungen in Themes und Erweiterungen, fehlende Cache-Regeln, falsche Dateipfade oder eine Mischung aus lokal und extern geladenen Varianten derselben Schrift.
Bei einem Relaunch sollten Webfonts gemeinsam mit CSS, sichtbaren Seitenelementen und Core Web Vitals getestet werden. Die SEO-Checkliste für den Website-Relaunch hilft bei der strukturierten Prüfung. Für grundlegende technische und inhaltliche Optimierungen findest du zusätzlich Hinweise zur Onpage-Optimierung.
Häufige Fragen zu Webfonts
Welche Webfont ist für eine Website geeignet?
Eine geeignete Webfont bietet die benötigten Zeichen und Schriftschnitte, ist als WOFF2 verfügbar und bleibt auch bei kleinen Schriftgrößen gut lesbar. Prüfe zusätzlich die Dateigröße und die Lizenzbedingungen für die Nutzung im Web.
Sollte man Google Fonts lokal einbinden?
Lokales Hosting gibt dir Kontrolle über Dateiformate, Cache-Regeln und Ladepfade. Externes Hosting kann zusätzliche Verbindungen zu einer fremden Domain erzeugen. Welche Variante passt, hängt von deiner technischen Infrastruktur und den rechtlichen Anforderungen des Projekts ab.
Wie viele Webfonts sollte eine Website laden?
Eine feste Obergrenze gibt es nicht. Lade nur die Schriftfamilien, Stärken und Stile, die im sichtbaren Design tatsächlich verwendet werden. Zwei Familien mit jeweils vier Varianten erzeugen bereits bis zu acht Schriftdateien.
Was bedeutet Font Subsetting?
Beim Font Subsetting werden nicht benötigte Zeichen aus einer Schriftdatei entfernt. Eine Website mit ausschließlich lateinischen Texten muss beispielsweise keine Zeichen aus anderen Schriftsystemen übertragen. Das Verfahren reduziert die Dateigröße, muss aber alle benötigten Sprachen und Sonderzeichen berücksichtigen.
Warum wird eine Webfont nicht angezeigt?
Häufige Ursachen sind ein falscher Dateipfad, eine fehlerhafte CSS-Regel, eine blockierte Anfrage, ein ungeeignetes Format oder fehlende Zeichen in der Schriftdatei. Das Netzwerkprotokoll und die Browser-Konsole zeigen, ob die Datei geladen und vom Browser akzeptiert wurde.
Sind variable Fonts immer besser?
Variable Fonts sind sinnvoll, wenn eine Website mehrere Stärken, Breiten oder andere Varianten derselben Schrift benötigt. Für eine Seite mit nur einem oder zwei Schriftschnitten können reduzierte statische Dateien kleiner sein. Maßgeblich ist die tatsächlich übertragene Datenmenge.
Wenn Webfonts, CSS und weitere Ressourcen die Ladezeit deiner Website beeinflussen, kann ein technischer Potenzialcheck die nächsten Schritte priorisieren.
Kostenlosen Potenzialcheck anfragen
Sie haben noch Fragen?
