Hoe optimaliseert next/font lettertypen?

Question

Accepted Answer

`next/font` optimaliseert weblettertypen automatisch om prestaties te verbeteren en lay-outveranderingen te elimineren — door lettertypen zelf te hosten bij het bouwen en de laaddetails voor u af te handelen. ## Waarom het belangrijk is ```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} ); } ``` ## Wat het automatisch doet - **Zelf-hosting** — bij het bouwen downloadt Next het Google-lettertype en serveert het vanaf **uw** domein. Geen aanvraag naar Google's servers tijdens runtime → sneller en beter voor privacy (geen tracking door derden). - **Nul lay-outverandering** — het berekent de metrische gegevens van het fallback-lettertype zodat deze overeenkomen met het weblettertype, dus wanneer het echte lettertype wordt ingewisseld, springt tekst niet (beschermt CLS). - **Preloading & subsetting** — preloadt het lettertype en bevat alleen de opgegeven tekensubsets, waardoor de download kleiner wordt. - **Geen render-blocking aanvraag** — lettertypen maken deel uit van uw build, geen blokkerende externe fetch. ## Lokale lettertypen ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Waarom lettertype-optimalisatie belangrijk is Lettertypen zijn een klassiek prestatie- en CLS-probleem: een fetch van derden die tekstrendering blokkeert, en vervolgens een lay-outsprong veroorzaakt wanneer het lettertype laadt (FOUT/FOIT). Dit goed handmatig doen vereist `@font-face`, `font-display`, preloading en fallback-metric matching. ## Waarom het belangrijk is `next/font` automatiseert de gehele checklist voor lettertypeprestaties — zelf-hosting (snelheid + privacy), subsetting en preloading (kleiner, sneller) en fallback-metric matching (geen lay-outverandering) — achter één import. Het verwijdert een lastige, gemakkelijk fout te maken optimalisatie en is de aanbevolen manier om zowel Google als lokale lettertypen in Next.js te gebruiken.