# Web Fonts (font-display)

Kategorie: [Performance & Core Web Vitals](https://seo-geo-glossary.com/de/glossar/kategorie/performance-core-web-vitals/) › [Optimierung](https://seo-geo-glossary.com/de/glossar/kategorie/performance-core-web-vitals/optimierung/) · 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.

## Verwandte Begriffe

- [Core Web Vitals](https://seo-geo-glossary.com/de/glossar/core-web-vitals/index.md)
- [Web Performance](https://seo-geo-glossary.com/de/glossar/web-performance/index.md)
- [Cumulative Layout Shift (CLS)](https://seo-geo-glossary.com/de/glossar/cumulative-layout-shift/index.md)
- [Largest Contentful Paint (LCP)](https://seo-geo-glossary.com/de/glossar/largest-contentful-paint/index.md)
- [Preload / Preconnect / Prefetch](https://seo-geo-glossary.com/de/glossar/preload-preconnect-prefetch/index.md)

## Quellen

- [Web Fonts – MDN Web Docs](https://developer.mozilla.org/de/docs/Learn_web_development/Core/Text_styling/Web_fonts)
- [font-display – MDN Web Docs](https://developer.mozilla.org/de/docs/Web/CSS/Reference/At-rules/@font-face/font-display)
- [Best practices for fonts – web.dev](https://web.dev/articles/font-best-practices)
- [Preload critical assets – web.dev](https://web.dev/articles/preload-critical-assets)

---

Stand: 7. Oktober 2026
URL: https://seo-geo-glossary.com/de/glossar/web-fonts/