English
Optimierung

Web Fonts (font-display)

Auch genannt: font-display

Web Fonts sind Schriftdateien, die mit der Webseite geladen werden, damit sie in einer Schrift dargestellt wird, die auf dem Gerät des Besuchers nicht installiert sein muss. Die Einbindung erfolgt per CSS-Regel @font-face. Für SEO und Core Web Vitals zählt, wann und wie die Schrift erscheint, denn das beeinflusst Ladezeit und Layout-Verschiebungen.

Format und Einbindung

MDN nennt WOFF2 als bevorzugtes Format. Es wird von allen modernen Browsern unterstützt und soll in der src-Liste an erster Stelle stehen. web.dev empfiehlt, ausschließlich WOFF2 zu verwenden, und nennt etwa 30 % bessere Kompression als bei WOFF. Weitere Hinweise zur Leistung sind das Aufteilen der Schrift mit unicode-range, weniger Schriftschnitte oder variable Fonts und ein preconnect zu fremden Schriftservern. Selbst gehostete Schriften funktionieren laut web.dev am besten mit CDN und HTTP/2.

font-display

Die Eigenschaft font-display legt fest, wie der Browser Text darstellt, solange die Schrift lädt. auto überlässt die Entscheidung dem Browser. block gibt eine kurze Blockierphase und eine unbegrenzte Tauschphase. swap hat eine äußerst kurze Blockierphase und eine unbegrenzte Tauschphase. fallback kombiniert eine äußerst kurze Blockierphase mit kurzer Tauschphase. optional hat eine äußerst kurze Blockierphase und keine Tauschphase. Laut web.dev ist optional die leistungsfähigste Einstellung, swap kann beim Austausch der Schrift zu sichtbaren Sprüngen führen.

Beispiel

CSS
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

Gegen Verschiebungen beim Tausch hilft size-adjust, das die Fallback-Schrift an die Webfont anpasst.

Häufige Fehler

  • Mehrere Formate laden, obwohl WOFF2 ausreicht.
  • Schriften ohne crossorigin per Preload laden, was sie doppelt abruft.
  • Viele Schriftschnitte, die auf der Seite kaum vorkommen.
  • Keine passende Fallback-Schrift, sodass der Text beim Tausch springt.

Häufige Fragen

Welches Format ist am besten? WOFF2.

Was bedeutet font-display: swap? Der Browser zeigt sofort eine Ersatzschrift und tauscht sie aus, sobald die Webfont geladen ist.

Quellen

  1. Web Fonts – MDN Web Docsdeveloper.mozilla.org
  2. font-display – MDN Web Docsdeveloper.mozilla.org
  3. Best practices for fonts – web.devweb.dev
  4. Preload critical assets – web.devweb.dev

Stand: