Come ottimizza i font next/font?

Question

Accepted Answer

`next/font` ottimizza automaticamente i font web per migliorare le prestazioni ed eliminare lo shift di layout — ospitando autonomamente i font al momento della build e gestendo i dettagli di caricamento per te. ## Utilizzo di un 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} ); } ``` ## Cosa fa automaticamente - **Self-hosting** — al momento della build, Next scarica il Google Font e lo fornisce dal **tuo** dominio. Nessuna richiesta ai server di Google a runtime → più veloce e migliore per la privacy (nessun tracking di terze parti). - **Zero layout shift** — calcola le metriche del font di fallback per corrispondere al font web, quindi quando il font vero viene scambiato, il testo non salta (protegge il CLS). - **Preloading e subsetting** — precarica il font e include solo i sottoinsiemi di caratteri specificati, riducendo il download. - **Nessuna richiesta di render-blocking** — i font fanno parte della tua build, non un fetch esterno bloccante. ## Font locali ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Perché l'ottimizzazione dei font è importante I font sono un classico problema di prestazioni e CLS: un fetch di terze parti che blocca il rendering del testo, quindi causa un salto di layout quando il font si carica (FOUT/FOIT). Farlo bene manualmente richiede `@font-face`, `font-display`, preloading e font-fallback metric matching. ## Perché è importante `next/font` automatizza l'intera checklist di ottimizzazione dei font — self-hosting (velocità + privacy), subsetting e preloading (più piccolo, più veloce) e font-fallback metric matching (nessuno shift di layout) — dietro un singolo import. Rimuove un'ottimizzazione complicata e facile da sbagliare ed è il modo consigliato per utilizzare sia i Google Font che i font locali in Next.js.