Hur optimerar next/font typsnitt?

Question

Accepted Answer

`next/font` optimerar automatiskt webbtypsnitt för att förbättra prestandan och eliminera layoutförskjutning — genom att själva-hysa typsnitt vid byggtid och hantera laddningsdetaljer för dig. ## Använda ett Google-typsnitt ```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} ); } ``` ## Vad det gör automatiskt - **Själva-hosting** — vid byggtid laddar Next ned Google-typsnittet och serverar det från **din** domän. Ingen förfrågan till Googles servrar under körning → snabbare och bättre för sekretess (ingen spårning från tredje part). - **Noll layoutförskjutning** — det beräknar reservtypsnittet mätvärden för att matcha webbtypsnitt, så när det riktiga typsnittet byter, flyttas inte text (skyddar CLS). - **Förladding och delmängder** — förladdar typsnittet och inkluderar bara angivna teckendelmängder, vilket minskar hämtningen. - **Ingen renderingsblockerad förfrågan** — typsnitt är del av din byggning, inte en blockerad extern hämtning. ## Lokala typsnitt ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Varför typsnittoptimering är viktig Typsnitt är ett klassiskt prestanda- och CLS-problem: en hämtning från tredje part som blockerar textrendering, sedan orsakar en layoutförskjutning när typsnittet läses in (FOUT/FOIT). Att göra detta väl manuellt kräver `@font-face`, `font-display`, förladding och fallback-mätvärdesöverenstämmelse. ## Varför det är viktigt `next/font` automatiserar hela typsnittsprestanda-checklistan — själva-hosting (hastighet + sekretess), delmängder och förladding (mindre, snabbare) och fallback-mätvärdesöverenstämmelse (ingen layoutförskjutning) — bakom en import. Det tar bort en krånglig, lätt-att-få-fel optimering och är det rekommenderade sättet att använda både Google och lokala typsnitt i Next.js.