TL;DR
Google Fonts per <link> im <head> ist 2026 eine automatische Performance-Regression — extra DNS, render-blocking CSS und CLS, wenn Text nach dem Laden von Weight 600 „springt". next/font self-hostet Dateien im Bundle, setzt font-display: swap und erzeugt CSS-Variablen — kein Request zu fonts.googleapis.com. Subsetting auf latin + latin-ext (polnische und deutsche Diakritika) spart 60–80 % gegenüber vollem Unicode. Platzhaltung via size-adjust oder festes Hero-line-height verhindert Layout Shift. Hosting auf DevStudioIT Cloud liefert Fonts vom gleichen Origin wie HTML.
Für wen
- Unternehmensseiten mit Figma-Typografie ohne LCP-Schaden
- Next.js-Teams mit CLS 0,15+ trotz optimierter Bilder
- Mehrsprachige PL/DE-Projekte mit latin-ext
- Designer mit vier Font-Weights — KB-Budget rechtfertigen
Keyword
next/font subsetting, web fonts performance, cls fonts nextjs, font-display swap, unternehmensseite typografie, google fonts self hosting 2026
Problem: externe Fonts und Core Web Vitals
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">| Schritt | Verzögerung | Wirkung |
|---|---|---|
| DNS fonts.googleapis.com | 20–80 ms | Nach HTML-TTFB |
| CSS font-face | blocking / FOIT | Verzögerter Text |
| DNS fonts.gstatic.com | weiterer RTT | Schlechteres LCP bei Text |
| .woff2 400+600+700 | 150–400 KB | Main-Thread-Decode |
CLS entsteht, wenn Fallback-Metriken von Inter abweichen.
next/font im App Router
import { Inter } from 'next/font/google';
export const inter = Inter({
subsets: ['latin', 'latin-ext'],
weight: ['400', '600'],
display: 'swap',
variable: '--font-inter',
preload: true,
adjustFontFallback: true,
});<html lang="de" className={inter.variable}>
<body className="font-sans antialiased">{children}</body>
</html>| Option | Effekt |
|---|---|
latin-ext |
PL/DE-Zeichen |
weight: ['400','600'] |
Nur genutzte Schnitte |
adjustFontFallback: true |
Automatisches size-adjust |
Subsetting
| Subset | Wann | Größe Inter 400 |
|---|---|---|
latin |
Nur EN | ~15 KB |
latin-ext |
PL, DE | +8–12 KB |
| Voller Unicode | ❌ | 200 KB+ |
Brand-Font lokal:
import localFont from 'next/font/local';
export const brandSans = localFont({
src: [
{ path: '../public/fonts/Brand-Regular.woff2', weight: '400' },
{ path: '../public/fonts/Brand-SemiBold.woff2', weight: '600' },
],
display: 'swap',
variable: '--font-brand',
});CLS — Platzhaltung
.hero-title {
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.15;
min-height: 2.3em;
}| Technik | CLS |
|---|---|
optional |
Niedrigstes, Font evtl. fehlt |
swap + size-adjust |
Empfohlen B2B |
| System-Font mobile | Null CLS |
Mobile 4G-Throttling in Lighthouse testen.
Typografie und LCP
Wenn LCP das H1 ist: nur kritische Weight preloaden, kein @import in CSS-Modulen, Hero als Server Component.
Mehrere Fonts
| Pattern | Dateien | Empfehlung |
|---|---|---|
| 1 Familie, 2 Weights | ~40 KB | ✅ Standard |
| Body + Display | 4 Dateien | OK für H1–H2 |
| 4 Weights × 2 Familien | 8+ | Budget-Review |
Monitoring auf DevStudioIT Cloud
Lighthouse CI (CLS, LCP), CrUX nach 28 Tagen, RUM layout-shift. Neue Weight 700 + Italic = +40 KB und CLS +0,05.
FAQ
next/font/google vs public/?
Build lädt und self-hostet mit Hash — wie manuell, ohne CORS. public/ nur für Nicht-Google-Fonts.
Variable Fonts immer kleiner?
Oft bei 3+ Weights — Größe und Windows-Rendering testen.
Adobe Fonts / Fontshare?
Externer Origin schadet CWV — nach Lizenz self-hosten.
Inter vs system-ui?
Bei LCP > 3 s mobile A/B mit system-ui testen.
Typografie ohne CLS-Regression?
- Kontakt — Font-Stack, next/font, Lighthouse CI
- Performance Budget CWV — CLS in PRs
- Next.js Bildoptimierung — wenn LCP Hero-Bild ist
Über den Autor
Wir bauen schnelle Websites, Web/Mobile-Apps, KI-Chatbots und Hosting — mit Fokus auf SEO und Conversion.
Empfohlene Links
Von Theorie zu Produktion — Branchly, Hosting-Stack und Referenzen.