Jak next/font optimalizuje fonty?

Question

Accepted Answer

`next/font` automaticky optimalizuje webové fonty, aby zlepšila výkon a eliminovala posun rozložení — samoobslužným hostováním fontů v čase buildu a řešením podrobností načítání za vás. ## Používání 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} ); } ``` ## Co dělá automaticky - **Samoobslužné hostování** — v čase buildu Next stáhne Google Font a servíruje jej z **vaší** domény. Žádný požadavek na servery Google za běhu → rychlejší a lepší pro soukromí (bez sledování třetích stran). - **Nulový posun rozložení** — vypočítá metriky náhradního fontu tak, aby odpovídaly webovému fontu, takže když se skutečný font přepne, text se nepohne (chrání CLS). - **Předběžné načítání a subsetting** — předběžně načítá font a zahrnuje pouze zadané podmnožiny znaků, čímž zmenšuje stahování. - **Bez blokujícího požadavku na vykreslení** — fonty jsou součástí vašeho buildu, ne blokujícího externího načtení. ## Místní fonty ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Proč je optimalizace fontů důležitá Fonty jsou klasickým problémem výkonu a CLS: načtení od třetí strany, které blokuje vykreslování textu, pak způsobí posun rozložení, když se font načte (FOUT/FOIT). Dělat to správně ručně vyžaduje `@font-face`, `font-display`, předběžné načítání a přiřazení metriky náhradního fontu. ## Proč to má значenie `next/font` automatizuje celý kontrolní seznam optimalizace fontů — samoobslužné hostování (rychlost + soukromí), subsetting a předběžné načítání (menší, rychlejší) a přiřazení metriky náhradního fontu (bez posunu rozložení) — za jedním importem. Odstraňuje složitou, snadno se mýlící optimalizaci a je doporučeným způsobem, jak používat fonty Google i místní fonty v Next.js.