Wie optimiert next/font Schriftarten?

Question

Accepted Answer

`next/font` optimiert automatisch Web-Fonts, um die Leistung zu verbessern und Layout-Shifts zu eliminieren — indem Fonts zur Build-Zeit selbst gehostet werden und die Ladedetails für Sie verwaltet werden. ## Google Font verwenden ```tsx // app/layout.tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], // only load the character sets you need (smaller files) display: "swap", // show fallback text immediately, swap when font loads }); export default function RootLayout({ children }) { return ( {/* apply the font */} {children} ); } ``` ## Was es automatisch tut - **Self-Hosting** — zur Build-Zeit lädt Next den Google Font herunter und serviert ihn von **Ihrer** Domain. Keine Anfragen an Googles Server zur Laufzeit → schneller und besser für den Datenschutz (kein Tracking durch Dritte). - **Null Layout-Shift** — es berechnet die Fallback-Font-Metriken, um dem Web-Font zu entsprechen, sodass beim Umschalten des echten Fonts der Text nicht springt (schützt CLS). - **Vorladen und Subsetting** — preloaded den Font und enthält nur die angegebenen Zeichensätze, wodurch der Download verkleinert wird. - **Keine Render-Blocking-Anfrage** — Fonts sind Teil Ihres Builds, nicht ein blockierendes externes Abrufen. ## Lokale Fonts ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Warum Schriftart-Optimierung wichtig ist Fonts sind ein klassisches Performance- und CLS-Problem: ein Abruf durch Dritte, der das Text-Rendering blockiert, und dann einen Layout-Jump verursacht, wenn der Font geladen wird (FOUT/FOIT). Dies richtig manuell zu tun, erfordert `@font-face`, `font-display`, Vorladen und Fallback-Metrik-Matching. ## Warum es wichtig ist `next/font` automatisiert die gesamte Font-Performance-Checkliste — Self-Hosting (Geschwindigkeit + Datenschutz), Subsetting und Vorladen (kleiner, schneller) und Fallback-Metrik-Matching (kein Layout-Shift) — hinter einem Import. Es entfernt eine knifflige, leicht falsch zu machende Optimierung und ist die empfohlene Methode zur Verwendung sowohl von Google- als auch lokalen Fonts in Next.js.