Hvordan optimaliserer next/font skrifter?

Question

Accepted Answer

`next/font` optimaliserer nettskrifter automatisk for å forbedre ytelse og eliminere layoutendringer — ved å selvhoste skrifter ved byggetid og håndtere lastingsdetaljer for deg. ## Bruke en Google-skrift ```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} ); } ``` ## Hva den gjør automatisk - **Selvhosting** — ved byggetid laster Next ned Google-skriften og serverer den fra **ditt** domene. Ingen forespørsel til Googles servere ved kjøretid → raskere og bedre for personvern (ingen sporing fra tredjeparter). - **Null layoutendring** — den beregner fallback-skriftens metrikk for å matche nettskriften, så når den virkelige skriften byttes inn, hopper ikke tekst (beskytter CLS). - **Forhåndsinnlasting og subsetting** — forhåndsinnlaster skriften og inkluderer bare de angitte tegnteilmengdene, noe som reduserer nedlastingen. - **Ingen render-blocking forespørsel** — skrifter er en del av bygget ditt, ikke en blokkerende ekstern henting. ## Lokale skrifter ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Hvorfor skriftoptimalisering betyr noe Skrifter er et klassisk ytelse- og CLS-problem: en forespørsel fra tredjepart som blokkerer tekstgjengivelse, og deretter forårsaker en layoutendring når skriften lastes (FOUT/FOIT). Å gjøre dette godt manuelt krever `@font-face`, `font-display`, forhåndsinnlasting og fallback-metric matching. ## Hvorfor det betyr noe `next/font` automatiserer hele skriftytelseschecklisten — selvhosting (hastighet + personvern), subsetting og forhåndsinnlasting (mindre, raskere) og fallback-metric matching (ingen layoutendring) — bak én import. Det fjerner en komplisert, lett-å-få-feil optimalisering og er den anbefalte måten å bruke både Google og lokale skrifter i Next.js på.