←

next/font/google: variable fonts automaticas al quitar weight

nextjsportfolio-organico2026-02-15next.jsfontsperformance

Contexto

El portfolio usaba Inter, JetBrains Mono y Space Grotesk con weights estaticos (weight: ["400", "500", "600", "700"]). Eso generaba un archivo font por cada weight -- 4 archivos solo para Inter.

Lo que aprendi

next/font/google tiene un comportamiento clave: si no especificas weight, automaticamente descarga la version variable de la font (un solo archivo que incluye todos los weights).

// ANTES: 4 archivos font separados (400, 500, 600, 700)
export const inter = Inter({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
  variable: "--font-editorial",
  display: "swap",
});

// DESPUES: 1 archivo variable font (todos los weights)
export const inter = Inter({
  subsets: ["latin"],
  variable: "--font-editorial",
  display: "swap",
});

Cuando NO funciona

No todas las Google Fonts tienen version variable. IBM Plex Mono es un ejemplo -- hay que mantener weights explicitos:

// IBM Plex Mono NO tiene variable font
export const ibmPlexMono = IBM_Plex_Mono({
  subsets: ["latin"],
  weight: ["400", "500", "600"],
  variable: "--font-terminal-mono",
  display: "swap",
});

Como verificar si una font es variable

  1. Ve a Google Fonts y busca la font
  2. Si dice "Variable" junto al nombre, puedes quitar el weight array
  3. Si solo lista weights individuales (400, 500, 700...), necesitas especificarlos

Impacto medido

Al convertir 3 fonts de estaticas a variable, se reduce el numero de archivos font descargados de ~10 a ~4. Menos requests HTTP = LCP mas rapido en mobile.

Referencia