Comment next/font optimise-t-il les polices ?

Question

Accepted Answer

`next/font` optimise automatiquement les polices web pour améliorer les performances et éliminer les décalages de mise en page — en auto-hébergeant les polices au moment de la compilation et en gérant les détails de chargement pour vous. ## Utiliser une police 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 qu'il fait automatiquement - **Auto-hébergement** — au moment de la compilation, Next télécharge la police Google et la sert depuis **votre** domaine. Aucune requête aux serveurs de Google à l'exécution → plus rapide et meilleur pour la confidentialité (pas de suivi tiers). - **Zéro décalage de mise en page** — il calcule les métriques de la police de secours pour correspondre à la police web, donc quand la vraie police est appliquée, le texte ne saute pas (protège le CLS). - **Préchargement et sous-ensemble** — précharge la police et inclut uniquement les sous-ensembles de caractères spécifiés, réduisant le téléchargement. - **Aucune requête bloquant le rendu** — les polices font partie de votre compilation, pas une récupération externe bloquante. ## Polices locales ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Pourquoi l'optimisation des polices est importante Les polices sont un problème classique de performance et de CLS : une récupération tierce qui bloque le rendu du texte, puis provoque un saut de mise en page quand la police se charge (FOUT/FOIT). Faire cela correctement manuellement nécessite `@font-face`, `font-display`, le préchargement et l'appariement des métriques de secours. ## Pourquoi c'est important `next/font` automatise la liste de contrôle complète de l'optimisation des polices — auto-hébergement (vitesse + confidentialité), sous-ensemble et préchargement (plus petit, plus rapide), et appariement des métriques de secours (pas de décalage de mise en page) — derrière une seule importation. Cela élimine une optimisation délicate et facile à mal faire et est la méthode recommandée pour utiliser les polices Google et locales dans Next.js.