CSS font-display Eigenschaft

Der CSS-font-display-Deskriptor steuert, wie sich eine benutzerdefinierte Webschrift verhält, während sie noch heruntergeladen wird: ob der Browser sofort einen Ersatztext anzeigt, den Text versteckt, bis die Schrift verfügbar ist, oder den Ladevorgang vollständig abbricht. Er ist ein Deskriptor, der innerhalb der @font-face-Regel verwendet wird — keine normale Eigenschaft, die man auf ein Element anwendet.

Diese Seite erklärt das Ladeproblem, das font-display löst, geht durch jeden der fünf Werte und gibt praktische Empfehlungen, welchen Wert man wählen sollte.

Warum font-display existiert

Ursprünglich war das Web auf eine Handvoll „websicherer" Schriften beschränkt, die auf dem Rechner des Nutzers installiert waren. Die @font-face-Regel hat das verändert: Man kann eigene Schriftdateien bereitstellen und dem Browser mitteilen, wo er sie herunterladen soll. Schriftdateien können jedoch groß sein, und ein Download braucht Zeit. Während dieser Verzögerung muss der Browser entscheiden, was für Text in dieser Schrift gerendert werden soll. Es gibt zwei konkurrierende Verhaltensweisen:

FOIT — Flash of Invisible Text. Der Browser versteckt den Text, bis die benutzerdefinierte Schrift fertig heruntergeladen ist. Bei einer langsamen Verbindung kann der Nutzer mehrere Sekunden lang auf eine leere Seite starren. Dies ist in den meisten Browsern das Standardverhalten.
FOUT — Flash of Unstyled Text. Der Browser zeigt den Text sofort in einer Ersatzschrift an und rendert ihn neu, sobald die benutzerdefinierte Schrift geladen ist. Der Inhalt ist sofort lesbar, aber es ist ein sichtbares „Springen" beim Austausch erkennbar.

Keines davon ist universell besser, daher ermöglicht font-display Ihnen, dem Browser mitzuteilen, welchen Kompromiss Sie bevorzugen.

Die drei font-display-Perioden

Jeder Wert wird anhand von drei Zeitabschnitten definiert, die beginnen, wenn die Schrift zu laden beginnt:

Block-Periode — der Text wird unsichtbar gerendert (er nimmt jedoch Platz ein). Lädt die Schrift während dieser Periode, wird sie verwendet. Endet die Periode zuerst, greift der Browser auf eine Systemschrift zurück.
Swap-Periode — der Text wird in einer Ersatzschrift angezeigt, aber der Browser tauscht sie gegen die benutzerdefinierte Schrift aus, sobald diese fertig geladen ist.
Failure-Periode — der Browser behandelt das Laden der Schrift als fehlgeschlagen und behält die Ersatzschrift bei, auch wenn die Schrift später noch ankommt.

Jeder Wert legt lediglich fest, wie lang die Block- und Swap-Periode dauern.

Anfangswert	auto
Gilt für	`@font-face`-Regel.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS Fonts Module Level 4
DOM-Syntax	object.style.fontDisplay = "swap";

Syntax

font-display: auto | block | swap | fallback | optional;

Da font-display ein Deskriptor ist, steht er innerhalb eines @font-face-Blocks neben font-family und src:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-display: swap; /* show fallback text immediately, then swap in the font */
}

Anschließend verwendet man die Schrift wie gewohnt. Der Deskriptor wird automatisch ausgelesen, wenn die Schrift lädt:

body {
  font-family: 'MyWebFont', Arial, sans-serif;
}

Werte

Wert	Block-Periode	Swap-Periode	Was der Nutzer sieht
`auto`	Browser-Standard	Browser-Standard	Was der Browser bevorzugt — verhält sich in der Regel wie `block`.
`block`	kurz (~3 s)	unbegrenzt	Zuerst unsichtbarer Text, dann die Schrift, wenn sie eintrifft (FOIT-nah).
`swap`	keine / minimal	unbegrenzt	Sofort Ersatztext, beim Laden gegen benutzerdefinierte Schrift ausgetauscht (FOUT).
`fallback`	sehr kurz (~100 ms)	kurz (~3 s)	Kurz unsichtbarer Text, dann Ersatz; die Schrift wird nur verwendet, wenn sie schnell lädt.
`optional`	sehr kurz (~100 ms)	keine	Ersatz, wenn die Schrift nicht bereits im Cache ist; kein layout-verschiebendes Swap.

Die genauen Periodenlängen sind durch die Spezifikation nicht festgelegt — jeder Browser wählt seine eigenen. Die oben genannten Werte sind die gängigen Standardwerte von Chrome und Firefox.

Welchen Wert sollte man wählen?

swap ist die beliebteste Wahl für Fließtext. Der Inhalt ist sofort lesbar, was hervorragend für Barrierefreiheit und wahrgenommene Performance ist. Der Nachteil ist ein sichtbarer Umbruch, wenn die Schrift eingewechselt wird.
optional ist die beste Wahl, wenn das Vermeiden von Layout-Verschiebungen wichtiger ist als die Garantie, dass die Schrift erscheint. Der Browser verwendet die benutzerdefinierte Schrift nur, wenn sie fast sofort geladen werden kann (typischerweise aus dem Cache); andernfalls bleibt er beim Fallback und tauscht nie aus. Dies hält Ihren Cumulative Layout Shift-Wert niedrig.
fallback ist ein Mittelweg: ein kurzes unsichtbares Fenster, dann Fallback, mit einer kurzen Chance zum Austausch. Gut geeignet für Schriften, die schön, aber nicht kritisch sind.
block eignet sich für Icon-Schriften oder Branding, bei denen das falsche Glyphe (z. B. ein Ersatzzeichen statt eines Icons) fehlerhaft aussehen würde — man zeigt lieber nichts als das Falsche.
auto überlässt die Entscheidung dem Browser und gibt Ihnen keine Kontrolle, daher ist es selten eine bewusste Wahl.

font-display ist ein Deskriptor, keine Eigenschaft, daher gelten die Schlüsselwörter initial und inherit nicht auf dieselbe Weise wie bei regulären CSS-Eigenschaften.

Browser-Unterstützung

font-display wird von allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari und Opera). In Browsern, die ein bestimmtes Schlüsselwort nicht erkennen, wird der Deskriptor einfach ignoriert und das Standard-Ladeverhalten des Browsers greift, sodass es sicher ohne Fallback verwendet werden kann.

Übung

Was sind die möglichen Werte für die CSS-Eigenschaft 'font-display'?