Webfonts
Was sind Webfonts?
Webfonts sind Schriftdateien, die eine Website beim Aufruf lädt und für die Darstellung von Text verwendet. Dadurch können Besucher definierte Schriftarten sehen, auch wenn diese nicht auf ihrem Gerät installiert sind. Dateiformat, Umfang, Speicherort und Ladepriorität beeinflussen dabei den PageSpeed und die visuelle Stabilität der Seite.
Webfonts, auf Deutsch Webschriften, werden über CSS eingebunden und vom Browser zusammen mit den übrigen Ressourcen einer Website geladen. Sie ermöglichen ein einheitliches Schriftbild auf Desktop, Tablet und Smartphone. Ohne diese Dateien greift der Browser auf eine lokal verfügbare Ersatzschrift wie Arial oder Georgia zurück.
Wie funktionieren Webfonts?
Webfonts werden üblicherweise mit der CSS-Regel @font-face definiert. Die Regel verbindet einen frei wählbaren Schriftnamen mit einer Schriftdatei sowie Angaben zu Schriftstärke und Schriftschnitt. Verwendet das weitere CSS diesen Schriftnamen, lädt der Browser die passende Datei und stellt den Text damit dar.
@font-face { font-family: 'Beispiel'; src: url('/fonts/beispiel.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } Jede zusätzliche Schriftstärke kann eine weitere Datei und damit eine weitere HTTP-Anfrage verursachen. Der Browser lädt eine Schriftdatei in der Regel erst, wenn sie für sichtbaren Text benötigt wird. Eine vorab geladene Datei kann früher verfügbar sein, beansprucht aber sofort Bandbreite. Deshalb sollten nur Schriften vorab geladen werden, die tatsächlich im sichtbaren Bereich der Startansicht verwendet werden.
Formate für Webfonts
WOFF2 ist für moderne Websites meist das bevorzugte Format. Es komprimiert Schriftinformationen effizienter als das ältere WOFF-Format und reduziert dadurch die zu übertragende Datenmenge. TTF und OTF sind verbreitete Desktopformate, erzeugen im Web aber häufig größere Dateien und werden für neue Einbindungen meist nicht benötigt.
| Format | Eigenschaft | Typischer Einsatz |
|---|---|---|
| WOFF2 | Hohe Kompression und breite Unterstützung in modernen Browsern | Bevorzugtes Format für aktuelle Websites |
| WOFF | Älteres Webfont-Format mit geringerer Kompression | Fallback für ältere Browser |
| TTF | Desktop-Schriftformat mit häufig größeren Dateien | Nur bei besonderen technischen Anforderungen |
| Variable Font | Mehrere Schriftstärken oder Achsen in einer Datei | Designs mit vielen tatsächlich genutzten Varianten |
Variable Fonts bündeln mehrere Schriftstärken, Breiten oder Neigungen in einer Datei. Das spart Anfragen, wenn eine Website viele Varianten derselben Schriftfamilie verwendet. Benötigt eine Seite dagegen nur einen normalen und einen fetten Schnitt, können zwei einzelne WOFF2-Dateien kleiner sein als eine umfangreiche variable Schrift. Vergleiche deshalb die gesamte übertragene Dateigröße und nicht nur die Anzahl der Dateien.
Webfonts und PageSpeed 2026
Webfonts beeinflussen den PageSpeed, weil Schriftdateien heruntergeladen, entpackt und verarbeitet werden müssen, bevor der Browser den vorgesehenen Text vollständig darstellen kann. Besonders relevant ist das bei großen Überschriften im sichtbaren Bereich. Wird eine solche Überschrift als größtes sichtbares Inhaltselement gewertet, kann eine verspätete Schriftbereitstellung den Largest Contentful Paint verlängern.
Ein häufiger Denkfehler besteht darin, jede Schriftdatei als gleich kritisch einzustufen. Eine Schrift für Text im unteren Seitenbereich benötigt beim ersten Seitenaufbau keine hohe Priorität. Eine Schrift für die Hauptüberschrift kann dagegen den sichtbaren Aufbau beeinflussen. Ladeprioritäten sollten deshalb aus dem tatsächlichen Einsatz auf der Seite abgeleitet werden.
Layout-Verschiebungen durch Schriftwechsel
Webfonts können den Cumulative Layout Shift beeinflussen, wenn Ersatzschrift und endgültige Schrift unterschiedliche Zeichenbreiten oder Zeilenhöhen besitzen. Nach dem Schriftwechsel entstehen dann andere Zeilenumbrüche. Inhalte unterhalb des Textes verschieben sich sichtbar. CSS-Eigenschaften wie size-adjust, ascent-override und descent-override helfen dabei, die Maße der Ersatzschrift an die Zielschrift anzunähern.
PageSpeed richtig messen
Messbar ist der Einfluss von Webfonts durch einen Vergleich derselben Seite vor und nach der Optimierung. Prüfe dabei die Zahl und Größe der Schriftdateien, ihren Startzeitpunkt im Ladeverlauf sowie Veränderungen bei Largest Contentful Paint und Cumulative Layout Shift. Der kostenlose Ladezeiten-Check liefert dafür PageSpeed-Werte für Mobilgeräte und Desktop sowie konkrete technische Hinweise.
Prüfe die Ladezeit deiner Seite direkt im Artikel:
Webfonts schneller laden
Die wirksamste Optimierung besteht darin, nur tatsächlich benötigte Zeichen und Schriftschnitte bereitzustellen. Eine Website mit Fließtext in Regular und Überschriften in Bold benötigt nicht automatisch die Stärken 300, 500, 600 und 800. Jeder entfernte Schnitt reduziert potenzielle Anfragen und Dateivolumen.
FOIT und FOUT unterscheiden
FOIT bedeutet Flash of Invisible Text. Der Browser zeigt während des Ladens der Schrift zeitweise keinen Text an. FOUT bedeutet Flash of Unstyled Text. Der Browser stellt den Inhalt zunächst mit einer Ersatzschrift dar und wechselt später zur vorgesehenen Schrift. FOUT hält Inhalte früher lesbar, kann aber sichtbare Zeilenumbrüche auslösen.
Die Eigenschaft font-display steuert dieses Verhalten. swap zeigt sofort eine Ersatzschrift und tauscht sie nach dem Download aus. optional erlaubt dem Browser, bei ungünstigen Ladebedingungen bei der Ersatzschrift zu bleiben. block kann Text zunächst unsichtbar lassen und sollte deshalb nur mit nachvollziehbarem gestalterischem Grund eingesetzt werden.
Externe oder lokale Webfonts?
Extern geladene Webfonts liegen auf der Domain eines Schriftanbieters. Der Browser muss dafür gegebenenfalls eine zusätzliche Verbindung einschließlich DNS-Auflösung und TLS-Aufbau herstellen. Lokal eingebundene Dateien werden über die eigene Website ausgeliefert und lassen sich dadurch gemeinsam mit den übrigen Ressourcen zwischenspeichern, versionieren und technisch kontrollieren.
Der Unterschied zwischen Webfonts und Systemschriften liegt im Download. Systemschriften sind bereits auf dem Gerät vorhanden und verursachen keine zusätzliche Schriftanfrage. Ihre Darstellung kann sich jedoch je nach Betriebssystem unterscheiden. Webfonts liefern ein konsistenteres Design, benötigen dafür aber eine kontrollierte Ladestrategie.
Auswirkungen auf SEO, SEA und GEO
Webfonts sind kein eigenständiger Rankingfaktor. Eine ungeeignete Einbindung kann jedoch Ladezeit, Core Web Vitals und Lesbarkeit beeinflussen. Diese Faktoren betreffen die technische Qualität und das Nutzererlebnis einer organischen Zielseite. Weitere technische Prüfpunkte findest du im Ratgeber zur Steuerung technischer SEO-Aufgaben.
Bei SEA wirkt sich die Schriftintegration auf dieselbe Landingpage aus, die Nutzer nach dem Anzeigenklick erreichen. Eine früh lesbare Überschrift und ein stabiler Seitenaufbau erleichtern die Orientierung. Für GEO, also Generative Engine Optimization, ist die Schrifttechnik nicht direkt relevant, solange Texte als echtes HTML vorliegen und nicht ausschließlich als Bild dargestellt werden.
Wer eine neue Website plant, sollte Schriftdateien bereits bei Design und Entwicklung berücksichtigen. Die OSG beschreibt auf der Seite zur Website-Entwicklung mit SEO-Fokus, wie Technik, Gestaltung und Auffindbarkeit gemeinsam geplant werden können.
Wenn Webfonts, PageSpeed und weitere technische Faktoren deiner Domain geprüft werden sollen, kannst du einen unverbindlichen Potenzialcheck anfragen.
Kostenlosen Potenzialcheck anfragen
Häufige Fragen zu Webfonts
Welche Webfonts sind besonders schnell?
Eine pauschal schnellste Schriftart gibt es nicht. Maßgeblich sind das Dateiformat, die enthaltenen Zeichen, die Zahl der Schriftschnitte und die Dateigröße. Eine reduzierte WOFF2-Datei ist häufig günstiger als eine vollständige Schriftfamilie mit mehreren ungenutzten Varianten.
Kann ich jede Schrift als Webfont verwenden?
Nein. Die Lizenz der Schrift muss die Nutzung und Bereitstellung auf Websites erlauben. Eine Lizenz für Desktopprogramme umfasst nicht automatisch die Einbindung als herunterladbare Schriftdatei.
Wie viele Webfonts sollte eine Website laden?
Es gibt keine feste Obergrenze. Lade nur die Familien, Schriftschnitte und Zeichen, die auf der jeweiligen Website tatsächlich vorkommen. Für viele Unternehmensseiten reichen eine Schriftfamilie und zwei oder drei verwendete Schnitte aus.
Sind Google Fonts Webfonts?
Ja. Google Fonts ist ein Dienst zur Bereitstellung von Webfonts. Die Dateien können abhängig von Lizenz und technischer Umsetzung über einen externen Server oder lokal über die eigene Domain eingebunden werden.
Warum wird meine Webfont nicht angezeigt?
Häufige Ursachen sind ein falscher Dateipfad, eine fehlerhafte CSS-Definition, nicht passende Angaben zu Schriftstärke und Schriftschnitt, fehlende Zugriffsrechte oder eine vom Browser abgelehnte Anfrage zwischen unterschiedlichen Domains.
Sind Icon-Fonts sinnvoll?
Icon-Fonts bündeln Symbole in einer Schriftdatei, laden aber oft auch ungenutzte Zeichen. Einzelne SVG-Symbole sind häufig gezielter steuerbar und können direkt im HTML eingebunden werden. Die passende Lösung hängt von Anzahl, Wiederverwendung und technischer Umsetzung der Symbole ab.
Sie haben noch Fragen?
