Cum optimizează next/font fonturile?

Question

Accepted Answer

`next/font` optimizează automat fonturile web pentru a îmbunătăți performanța și a elimina deplasarea aspectului — prin auto-găzduire a fonturilor la timp de construire și gestionarea detaliilor de încărcare pentru tine. ## Utilizarea unei fonturi Google ```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} ); } ``` ## Ce face automat - **Auto-găzduire** — la timp de construire, Next descarcă fontura Google și o servește din **domeniul tău**. Nicio cerere către serverele Google la runtime → mai rapid și mai bun pentru confidențialitate (fără urmărire de terți). - **Deplasare zero a aspectului** — calculează metricile fontului de rezervă pentru a se potrivi cu fontura web, deci când fontura reală este schimbată, textul nu sare (protejează CLS). - **Preîncărcare și subsetting** — preîncarcă fontura și include doar subseturile de caractere specificate, reducând descărcarea. - **Nicio cerere de blocare a randării** — fonturile fac parte din construcția ta, nu o preluare externă de blocare. ## Fonturi locale ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## De ce optimizarea fonturilor contează Fonturile sunt o problemă clasică de performanță și CLS: o preluare de la terți care blochează randarea textului, apoi provoacă o deplasare a aspectului atunci când fontura se încarcă (FOUT/FOIT). A face asta bine manual necesită `@font-face`, `font-display`, preîncărcare și potrivirea metricilor de rezervă. ## De ce contează `next/font` automatizează întreaga listă de verificare a performanței fonturilor — auto-găzduire (viteză + confidențialitate), subsetting și preîncărcare (mai mic, mai rapid) și potrivirea metricilor de rezervă (nicio deplasare a aspectului) — în spatele unei singure importări. Eliminează o optimizare dificilă și ușor de greșit și este modalitatea recomandată de a folosi atât fonturile Google, cât și cele locale în Next.js.