¿Cómo optimiza `next/font` las fuentes?

Question

Accepted Answer

`next/font` optimiza automáticamente las fuentes web para mejorar el rendimiento y eliminar el cambio de diseño — alojando fuentes automáticamente en tiempo de compilación y manejando los detalles de carga por ti. ## Uso de una fuente de 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} ); } ``` ## Lo que hace automáticamente - **Alojamiento automático** — en tiempo de compilación, Next descarga la fuente de Google y la sirve desde **tu** dominio. Sin solicitudes a los servidores de Google en tiempo de ejecución → más rápido y mejor para la privacidad (sin seguimiento de terceros). - **Cero cambios de diseño** — calcula las métricas de la fuente alternativa para que coincidan con la fuente web, por lo que cuando se cambia la fuente real, el texto no salta (protege CLS). - **Precarga y subsetting** — precarga la fuente e incluye solo los subconjuntos de caracteres especificados, reduciendo la descarga. - **Sin solicitud de bloqueo de representación** — las fuentes son parte de tu compilación, no una solicitud externa bloqueante. ## Fuentes locales ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Por qué la optimización de fuentes es importante Las fuentes son un problema clásico de rendimiento y CLS: una solicitud de terceros que bloquea la representación de texto, y luego causa un salto de diseño cuando se carga la fuente (FOUT/FOIT). Hacerlo correctamente manualmente requiere `@font-face`, `font-display`, precarga y coincidencia de métricas alternativas. ## Por qué es importante `next/font` automatiza toda la lista de verificación de rendimiento de fuentes — alojamiento automático (velocidad + privacidad), subsetting y precarga (más pequeño, más rápido) y coincidencia de métricas alternativas (sin cambio de diseño) — detrás de una sola importación. Elimina una optimización complicada y fácil de hacer mal, y es la forma recomendada de usar tanto fuentes de Google como fuentes locales en Next.js.