Beheben Sie Ensure text remains visible during webfont load

Stellen Sie sicher, dass der Text während des Ladens von Webfonts sichtbar bleibt

Bevor es Webfonts gab, waren Webdesigner auf eine kleine Anzahl vorinstallierter Schriftarten beschränkt. Webfonts geben Ihnen die Freiheit, jede beliebige Schriftart auf einer Website zu verwenden.

Das klingt natürlich gut, aber Webfonts haben auch ihre Nachteile; sie verlangsamen die Ladegeschwindigkeit der Seite auf verschiedene Weise.

Webfonts sind normalerweise große Dateien, die nicht standardmäßig auf einem Computer installiert sind. Daher müssen Webfonts heruntergeladen werden, bevor sie verwendet werden können. Während des Herunterladens eines Webfonts wird der Text auf einer Webseite vorübergehend ausgeblendet, bis der Webfont vollständig geladen ist. Dies sorgt für eine schlechte user experience; niemand möchte zu lange auf einen leeren Bildschirm starren.

Sobald der Webfont geladen und gerendert ist, ersetzt der Browser den "unsichtbaren Text" durch den endgültigen Text mit dem neuen Webfont. Dieser Moment wird Flash of Invisible Text (FOIT) genannt. Dieses FOIT ist die Ursache dafür, dass die Fehlermeldung "Ensure text remains visible during webfont load" angezeigt wird.

Sie laden einen Webfont auf Ihrer Seite und treffen keine Vorkehrungen, um diesen Flash of Invisible Text zu verhindern? Wenn Sie den PageSpeed in Lighthouse analysieren, wird die folgende Meldung angezeigt: "Ensure text remains visible during webfont load". Dies zeigt Ihnen, wie viel Zeit Sie sparen könnten, wenn Sie den Text sichtbar machen, bevor der Webfont geladen ist. Bei einer einzigen Schriftart sind das leicht 100ms.

Warum ist unsichtbarer Text schlecht für die Seitengeschwindigkeit?

Unsichtbarer Text verlangsamt die endgültige gemessene Ladezeit einer Seite nicht wirklich. Warum hält Lighthouse es also für ein so großes Problem?

Google hält es für wichtig, dass eine Webseite die bestmögliche user experience bietet. Die user experience kann verbessert werden, indem Inhalte so schnell wie möglich auf der Seite angezeigt werden. Unsichtbarer Text wirkt sich direkt auf Ihren First Contentful Paint (FCP) aus, da der Browser keinen Text zeichnen kann, den er versteckt. Wenn Text Ihr Largest Contentful Paint (LCP)-Element ist, verzögert FOIT auch diese Metrik. Vergleichen Sie die beiden Filmstreifen-Versionen unserer Homepage unten:

Flash of Invisible Text

Kein Flash of Invisible Text mit display:swap

Wie Sie sehen können, haben beide Seiten das Laden genau zur gleichen Zeit abgeschlossen. Dennoch sieht die neueste Version der Website für Besucher viel besser aus. Besucher können sofort mit dem Lesen beginnen.

Deshalb ist es klug, Text trotzdem anzuzeigen, nicht in der endgültigen Schriftart, sondern in einer "Fallback"-Schriftart. Auf diese Weise denkt der Besucher, dass Ihre Seite wirklich superschnell lädt.

Eine kurze Erinnerung: FOIT und FOUT

Bevor wir weitergehen, ist es hilfreich, die folgenden Konzepte zu unterscheiden: FOIT und FOUT. FOIT steht für den Flash of Invisible Text und tritt auf, wenn Webfonts während des Ladevorgangs nicht sichtbar sind. Sie können dies abmildern, indem Sie einen Fallback-Font einbinden. Wenn der Fallback-Font durch den Webfont ersetzt wird, spricht man von FOUT, Flash of Unstyled Text.

Webfonts während des Ladevorgangs sichtbar machen

Es gibt zwei Möglichkeiten, Webfonts während des Ladevorgangs sichtbar zu machen: Erstens über den CSS-Wert font-display; zweitens durch die Verwendung eines Fallback-Fonts über eine Klasse. Beide Methoden haben Vor- und Nachteile, die ich im Folgenden diskutieren werde.

Methode 1: Font-display:swap

Font-display ist ein CSS-Deskriptor, der allen modernen Browsern zur Verfügung steht. Der font-display-Deskriptor bestimmt, wie eine Schriftart angezeigt wird, basierend darauf, ob und wann sie heruntergeladen wurde. Font-display wird in einer @font-face-Regel verwendet.

Es gibt vier font-display-Werte, die Sie kennen sollten:

• swap: Zeigt den Fallback-Font sofort an und tauscht ihn dann gegen den Webfont aus, wenn er geladen ist. Das Austauschfenster ist unendlich, sodass der Webfont den Fallback letztendlich immer ersetzt. Am besten für Markenschriftarten und Überschriften.
• optional: Zeigt den Fallback-Font sofort an. Der Browser entscheidet basierend auf der Verbindungsgeschwindigkeit, ob er tauscht. Kein Austausch bedeutet Null layout shift. Am besten für Fließtext, bei dem Leistung die Priorität hat.
• fallback: Zeigt den Fallback-Font sofort an und gibt dem Webfont dann ein kurzes Zeitfenster (~3 Sekunden) zum Laden. Wenn er das Zeitfenster verpasst, bleibt der Fallback erhalten. Ein Mittelweg zwischen swap und optional.
• block: Versteckt den Text bis zu 3 Sekunden lang, während die Schriftart lädt. Dies ist die Ursache für FOIT. Verwenden Sie dies nicht, es sei denn, Sie haben einen bestimmten Grund (wie Icon-Fonts).

Laut dem 2025 Web Almanac verwenden nur 50 % der Websites font-display: swap, während 25 % immer noch block verwenden. Das bedeutet, dass ein Viertel des Webs während des Ladens von Schriftarten immer noch unsichtbaren Text anzeigt.

Verwenden Sie den swap-Wert, um FOIT zu vermeiden und den Text so schnell wie möglich auf dem Bildschirm erscheinen zu lassen. Sobald wir den Wert font-display: swap in der @font-face-Regel festlegen, werden die Standardschriftarten des Systems verwendet, während die Seite lädt, bis die Webfonts geladen sind. Dies hilft dem Besucher, den Text auf der Seite sofort zu lesen.

Google Fonts

Wenn Sie Google Fonts verwenden, können Sie die Methode font-display: swap mit einem einfachen "&display=swap" im Stylesheet oder Embed-Code verwenden.

<!-- über ein externes Stylesheet -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

<!-- über die Import-Methode (langsamer, nicht empfohlen) -->
<style>
 @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
</style>

Die @import-Methode blockiert das Rendering (render-blocking) und zwingt den Browser, Stylesheets nacheinander herunterzuladen. Die <link>-Methode ist schneller, da der Browser das Font-Stylesheet früher im Parsing-Prozess entdecken kann.

Aber wir sind keine Fans beider Ansätze. Es ist fast immer viel schneller, Webfonts selbst zu hosten. Das gibt Ihnen mehr Kontrolle über den "Preloading"-Prozess der Schriftarten. Sie können die bereits bestehende HTTP/2-Verbindung nutzen und müssen kein zusätzliches Stylesheet herunterladen.

Lokale Schriftarten

@font-face {
 font-family: "Open Sans";
 font-weight: 400;
 font-style: normal;
 src: url("OpenSans400.woff2") format("woff2");
 font-display: swap
}

WOFF2 ist alles, was Sie brauchen. Es wird in jedem modernen Browser unterstützt und bietet die beste Komprimierung. Laut dem 2025 Web Almanac hosten inzwischen 72 % der Websites ihre Schriftarten selbst, und WOFF2 macht 65 % aller Web-Font-Anfragen aus. Es gibt keinen Grund mehr, WOFF oder TTF als Fallback-Formate einzubinden.

Verhindern Sie layout shift beim Austausch von Schriftarten

Es gibt einen Haken bei font-display: swap. Wenn der Browser von der Fallback-Schriftart zum Webfont wechselt, ändert sich oft die Größe des Textes. Verschiedene Schriftarten haben unterschiedliche Zeichenbreiten, Aufstiegshöhen (ascent) und Zeilenabstände. Diese Größenänderung verursacht Cumulative Layout Shift (CLS), was ein Core Web Vital ist.

Die Lösung ist der CSS-Deskriptor size-adjust. Er skaliert den Fallback-Font so, dass er den Abmessungen Ihres Webfonts entspricht, sodass der Austausch kaum bis gar keinen sichtbaren Shift verursacht. Die Browserunterstützung liegt bei über 93 %, einschließlich Safari 17+.

/* Definieren Sie einen passenden Fallback-Font */
@font-face {
 font-family: "Open Sans Fallback";
 src: local("Arial");
 size-adjust: 105%;
 ascent-override: 110%;
 descent-override: 25%;
 line-gap-override: 0%;
}

/* Verwenden Sie beide in Ihrem Font-Stack */
body {
 font-family: "Open Sans", "Open Sans Fallback", sans-serif;
}

Die Deskriptoren ascent-override, descent-override und line-gap-override bieten eine noch präzisere Kontrolle über die vertikalen Metriken. Diese funktionieren in Chrome, Firefox und Edge, aber noch nicht in Safari, behandeln Sie sie also als Progressive Enhancement. Allein die Eigenschaft size-adjust macht bereits einen spürbaren Unterschied.

Auf Websites, die von CoreDash überwacht werden, weisen Seiten, die font-display: swap mit Font-Metric-Overrides kombinieren, 75 % weniger font-bezogenen CLS auf als Seiten, die nur swap verwenden.

Methode 2: Schriftarten mit einer Klasse

Die zweite Möglichkeit, Schriftarten während des Ladens sichtbar zu machen, besteht darin, mit Klassen zu arbeiten. Diese Klassen werden normalerweise (aber nicht immer) dem <body>- oder <html>-Element hinzugefügt.

Der Vorteil dieser Methode besteht darin, dass Sie mehr Kontrolle über den Fallback-Font und den Zeitpunkt des Flash of Unstyled Text haben.

Diese Methode funktioniert wie folgt: Geben Sie in Ihrem Stylesheet an, dass eine Seite zunächst mit einer Schriftart (dem Fallback-Font) gerendert werden soll. Anschließend laden Sie den Webfont über die JavaScript FontFace API oder via Preloading. Nachdem diese Schriftart geladen wurde, fügen Sie Ihrer Seite eine Klasse hinzu. Die Klasse stellt sicher, dass der Webfont aktiviert wird.

Warum sollten Sie das tun, fragen Sie sich vielleicht? Sie tun dies, um mehr Kontrolle über den Fallback-Font zu erlangen. Sie können den Fallback-Font mit einem größeren Zeilenabstand oder einer anderen Größe anzeigen, damit er besser zum Webfont passt. Dies verhindert layout shifts.

Wenn Sie mehrere Webfonts verwenden, können Sie die FontFace API-Methode nutzen, um alle Schriftarten auf einmal zu wechseln. Das spart viele Browser-Repaints. Persönlich bin ich kein Fan dieser Methode; dies führt dazu, dass FOUT erst stattfindet, nachdem die letzte Schriftart geladen wurde. Das ist also immer später als nötig.

Schriftart mit einer Klasse über die FontFace API:

<style>
  // Fallback-Font mit .9rem font-size
  html{
    font-family: sans-serif;
    font-size:.9rem;
  }

  // Webfont mit 1rem font-size
  html.fl{
    font-family: 'webfont';
    font-size:1rem;
  }
</style>

<script>
var font = new FontFace("webfont", "url(/font.woff2)", {
  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});

// warten Sie nicht auf den Render Tree, initiieren Sie einen sofortigen Fetch!
font.load().then(function() {
  document.fonts.add(font);
  document.documentElement.classList.add("fl")
});
</script>

Über einen Preload-Link

Die zweite Methode erfolgt über einen Preload-Link. Preloaden Sie die Schriftart, wie unten beschrieben. Sobald dies erledigt ist, wechseln Sie die Klasse des <html>-Elements.

<link
  rel="preload"
  href="/webfont.woff2"
  as="font"
  type="font/woff2" crossorigin
  onload="document.documentElement.classList.add('fl')">

<style>
  // Fallback-Font mit .9rem font-size
  html{
    font-family: sans-serif;
    font-size:.9rem;
  }

  // Webfont mit 1rem font-size
  html.fl{
    font-family: 'webfont';
    font-size:1rem;
  }

  // @font-face, wird nur aktiviert, sobald die Klasse .fl dem html-Tag hinzugefügt wird
  @font-face{
    font-family:'Open Sans';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src: url(/webfont.woff2) format("woff2");
    unicode-range:U+000-00FF;
  }
</style>

Zusätzliche Tipps und Tricks

1. Preloaden Sie immer sichtbare Schriftarten. Schriftarten werden standardmäßig erst heruntergeladen, wenn sie tatsächlich auf einer Seite verwendet werden. Wenn Sie einen Webfont benötigen, preloaden Sie ihn, damit er früher verfügbar ist.
2. Möchten Sie FOIT und FOUT komplett vermeiden? Verwenden Sie font-display: optional in Kombination mit Preloading.
3. Webfonts selbst zu hosten ist immer schneller als Webfonts über Google Fonts oder ein anderes externes CDN.

Möchten Sie überprüfen, ob Ihre Font-Loading-Strategie die reale user experience tatsächlich verbessert? Nutzen Sie Real User Monitoring, um Ihren FCP und CLS vor und nach der Durchführung von Änderungen zu verfolgen.