¿Te ha pasado que entras a una web, vas a hacer clic en un botón y, de repente, el texto "salta", el botón se mueve y acabas clickando en un anuncio o en "Cancelar"?
Eso es el CLS (Cumulative Layout Shift).
No es solo molesto: Google te penaliza por ello. El CLS es uno de los tres pilares de los Core Web Vitals. Un puntaje alto no solo frustra a tus usuarios, sino que hunde tu posicionamiento SEO.
El culpable suele ser la fuente. El navegador carga primero una fuente del sistema (Arial, Times...) y luego la sustituye por tu fuente personalizada. Como tienen tamaños distintos, todo el layout explota.
Para evitar el salto, no necesitamos magia, necesitamos Matemáticas CSS.
El secreto es el Font Matching: Modificar las dimensiones de la "fuente fea" (Arial) para que ocupe exactamente el mismo espacio físico que la "fuente bonita" (Inter).
Para ello, usamos tres propiedades CSS modernas que "hackean" la fuente del sistema:
ascent-override: Ajusta la altura de la línea por encima del texto (el "techo").
descent-override: Ajusta la profundidad por debajo de la línea base (el "suelo").
size-adjust: Escala el tamaño general de la letra para que coincida en ancho.
ℹ️ Nota de Compatibilidad: Estas propiedades son parte del estándar "Baseline". En 2026, son soportadas por el 100% de los navegadores modernos. Úsalas sin miedo.
El componente next/font ya hace esto nativamente. Inyecta los valores de override automáticamente sin configuración extra.
bash
# No necesitas instalar nada extra, viene con Next.js
javascript
import { Inter } from 'next/font/google'// Next.js genera el fallback métrico automáticamenteconst inter = Inter({ subsets: ['latin'], display: 'swap', adjustFontFallback: true // ✅ Activado por defecto})export default function RootLayout({ children }) { return ( <html lang="es" className={inter.className}> <body>{children}</body> </html> )}
Para el resto del ecosistema, existe unplugin-fontaine.
Este plugin lee tus archivos CSS al compilar, detecta las fuentes y genera los fallbacks métricos automáticamente. Es "instalar y olvidar".
bash
npm install -D unplugin-fontaine
javascript
// vite.config.jsimport { FontaineTransform } from 'unplugin-fontaine/vite'export default { plugins: [ FontaineTransform({ // Mapea tus fuentes a un fallback seguro del sistema fallbacks: ['BlinkMacSystemFont', 'Segoe UI', 'Helvetica Neue', 'Arial'], resolvePath: (id) => new URL(`.${id}`, import.meta.url), }) ]}
¿Quieres priorizar una fuente crítica (ej. el título principal) a toda costa?
El preload obliga al navegador a descargar la fuente antes de que empiece a leer el CSS. Pero cuidado: solo la descarga. Aún necesitas definirla para usarla.
⚠️ Advertencia: Úsalo con cuidado. Si abusas, bloquearás la carga del resto de la web.
Icon Fonts (FontAwesome antiguo): Mala práctica en 2026. Causan saltos y son pesadas. Usa siempre SVG: son vectoriales, ligeros y no bloquean el renderizado.
Demasiados archivos de fuente: No cargues 5 archivos (light, regular, bold, black...). Usa una sola Variable Font que contenga todos los pesos en un solo archivo optimizado.
Google Fonts por CDN:<link href="fonts.googleapis..."> añade latencia DNS. Siempre aloja las fuentes tú mismo (Self-hosting) o usa next/font.