Hvordan optimeres skrifttyper af next/font?

Question

Accepted Answer

`next/font` optimerer automatisk webskrifttyper for at forbedre ydeevne og eliminere layoutskift — ved at selv-hoste skrifttyper på build-tidspunktet og håndtere indlæsningsdetaljerne for dig. ## Brug af Google Font ```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} ); } ``` ## Hvad gør det automatisk - **Selv-hosting** — på build-tidspunktet downloader Next Google-skrifttypen og betjener den fra **dit** domæne. Ingen anmodning til Googles servere under kørsel → hurtigere og bedre for privatlivsbeskyttelse (ingen tredjepartsovervågning). - **Nul layoutskift** — det beregner fallback-skrifttypens målinger for at matche webskrifttypen, så når den rigtige skrifttype skifter, springer teksten ikke (beskytter CLS). - **Forudindlæsning og subsetting** — forudindlæser skrifttypen og inkluderer kun de angivne tegnsæt, hvilket reducerer download. - **Ingen renderingsblokkerende anmodning** — skrifttyper er en del af dit build, ikke en blokerende ekstern hentning. ## Lokale skrifttyper ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Hvorfor fontoptimering betyder noget Skrifttyper er et klassisk ydelses- og CLS-problem: en tredjepartsdownload, der blokerer tekstgengivelse, og som derefter forårsager et layoutskift, når skrifttypen indlæses (FOUT/FOIT). At gøre dette rigtigt manuelt kræver `@font-face`, `font-display`, forudindlæsning og fallback-måling matching. ## Hvorfor det betyder noget `next/font` automatiserer hele fontydelsestjecklisten — selv-hosting (hastighed + privatlivsbeskyttelse), subsetting og forudindlæsning (mindre, hurtigere) og fallback-måling matching (ingen layoutskift) — bag ét import. Det fjerner en vanskelig, nem-at-få-forkert optimering og er den anbefalede måde at bruge både Google- og lokale skrifttyper i Next.js.