Fonts

Schnell laden, stabil bleiben

Webfonts sind hübsch, aber gern ein stiller Performance-Fresser: Sie blockieren Text, verursachen Layout-Shifts und ziehen Verbindungen zu Fremd-Servern auf.

Selbst hosten statt einbinden

Fonts vom eigenen Server (oder aus dem Build) statt per Fremd-CDN laden. Vorteile:

eine Verbindung weniger (kein zusätzlicher DNS-/TLS-Aufbau)
volle Kontrolle über Caching und Versionierung
Datenschutz: keine Anfrage an Dritte beim Seitenaufruf

In Next.js erledigt das next/font – die Fonts werden gebündelt, lokal ausgeliefert und automatisch vorgeladen.

font-display: der Umgang mit dem Wartemoment

Steuert, was passiert, während der Font noch lädt:

Wert	Verhalten
`swap`	sofort Fallback-Schrift, dann Tausch – Text ist nie unsichtbar
`optional`	Fallback; der Webfont wird nur genutzt, wenn er sehr schnell da ist – am besten für CLS
`block`	kurz unsichtbarer Text (FOIT) – meist unerwünscht

Für die meisten Fälle ist swap ein guter Standard, optional die CLS-freundlichste Wahl.

Kritische Fonts vorladen

Die Schrift für sichtbaren Text früh anstoßen:

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />

Nur wirklich benötigte Schnitte vorladen – jedes Preload konkurriert um Bandbreite.

Weniger ist schneller

Nur genutzte Schnitte laden (nicht Thin bis Black, wenn nur Regular und Bold gebraucht werden).
woff2 verwenden – das kleinste, breit unterstützte Format.
Subsetting: nur die tatsächlich benötigten Zeichensätze (z. B. Latin) einbinden.

CLS durch Font-Tausch vermeiden

Wenn Fallback- und Webfont unterschiedlich breit bauen, springt das Layout beim Tausch. size-adjust bzw. die automatischen Fallback-Metriken von next/font gleichen das aus.

Kurz: selbst hosten, nur nötige Schnitte in woff2, sinnvolles font-display, kritische Fonts vorladen – und den Tausch metrisch angleichen.