⚡Performance

Google Fonts optimiert laden

Schnelle Schriften ohne Layout-Shift

Falsch geladene Fonts sind der haeufigste Grund fuer Layout-Shifts und langsame Seiten. Next.js hat ein eingebautes Font-System das Google Fonts automatisch optimiert. Keine externen Requests, kein Flackern, maximale Performance.

Pro-Tip — Der schnelle Weg
Nutze maximal zwei Font-Familien pro Projekt. Eine fuer Ueberschriften, eine fuer Text. Jede zusaetzliche Font kostet Ladezeit und macht dein Design unruhig.
Seite 1
1

Next.js Font importieren

Importiere deine gewuenschte Google Font direkt aus next/font/google. Next.js laedt die Font-Dateien beim Build herunter und hostet sie lokal. Kein externer Google-Request noetig.

import { Inter, Poppins } from 'next/font/google';


const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
const poppins = Poppins({ weight: ['400', '600', '700'], subsets: ['latin'], variable: '--font-poppins' });
2

Font im Layout einbinden

Setz die CSS-Variable auf den Body-Tag in deinem Root-Layout. Damit ist die Font ueberall verfuegbar ohne extra Imports in jeder Komponente.

export default function RootLayout({ children }) {
 return (
 <html lang='de'>
 <body className={`${inter.variable} ${poppins.variable} font-sans`}>
 {children}
 </body>
 </html>
 );
}
3

In Tailwind konfigurieren

Verbinde die CSS-Variablen mit Tailwind damit du die Fonts als Utility-Klassen nutzen kannst. So schreibst du font-heading statt einer langen className.

// tailwind.config.ts
theme: {
 fontFamily: {
 sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
 heading: ['var(--font-poppins)', 'sans-serif'],
 },
}
4

Display swap aktivieren

Setz display: 'swap' damit der Browser sofort eine Fallback-Font zeigt und nach dem Laden wechselt. Das verhindert unsichtbaren Text waehrend die Font laedt.

const inter = Inter({
 subsets: ['latin'],
 display: 'swap',
 variable: '--font-inter',
});
Seite 2
Warum das funktioniert
  • Self-Hosting eliminiert externe Requests und spart DNS-Lookups
  • Automatische Subsetting reduziert die Font-Dateigroesse um bis zu 90 Prozent
  • CSS-Variablen machen Font-Wechsel spaeter zum Einzeiler
  • Display swap verhindert Layout-Shifts und verbessert Core Web Vitals
Tipps
  • Lade nur die Gewichte die du wirklich brauchst, jedes Extra-Weight kostet Kilobytes
  • Subset latin reicht fuer Deutsch, du brauchst kein latin-ext
  • Teste mit Lighthouse ob dein CLS-Score nach der Font-Einbindung bei 0 liegt
  • Lokale Fonts kannst du mit next/font/local genauso optimiert laden
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen