Next.js 52: next/font — Fuentes web autohospedadas
easy⏱ 5 mincoursenextjs
Sin petición de red en runtime
import { Inter } from 'next/font/google' parece que pide a Google en runtime, pero no lo hace — el build de Next.js descarga los archivos de fuente una vez y los empaqueta como assets estáticos en tu propio servidor. El navegador nunca habla con fonts.googleapis.com, lo que elimina una petición, una consulta DNS y un problema de privacidad de una sola vez.
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"], display: "swap" });
export default function RootLayout({ children }) {
return (
<html lang="en" className={inter.className}>
<body>{children}</body>
</html>
);
}
Completa la estrategia local
Ya está agregada una tercera entrada en STRATEGIES para next/font/local, con extraRequestMs: 0 (el archivo ya viaja en el bundle) y swap: false, igual que next/font/google. Simula una carga de página en las tres filas y compáralas — luego prueba cambiar el extraRequestMs de local para ver que la fila se comporte como la del link tag.
Tamaño de respaldo automático
Más allá de saltarse la petición, next/font mide las métricas (ascent, descent, line gap) de la fuente elegida y genera un respaldo con tamaño ajustado — así el texto compuesto con el respaldo ocupa exactamente la misma caja que la fuente final. Eso es lo que elimina el salto del font-swap, no font-display: swap por sí solo.