next/font con tipografías editoriales sin penalizar el rendimiento

Cuando un restaurante o un hostal rural pide una identidad visual con carácter — serifas editoriales, no la sans-serif genérica de cualquier SaaS — la tentación es sacrificar performance por estética. next/font hace que esa elección no sea necesaria.

El combo que uso: serif de personaje + sans-serif de apoyo

Cormorant Garamond o Playfair Display para titulares (el carácter visual del negocio) combinadas con una sans-serif neutra y muy legible para cuerpo de texto (Source Sans, Inter). Dos familias, no más: cada fuente adicional es una descarga adicional, aunque next/font las optimice.

Por qué next/font no penaliza aunque sean fuentes 'pesadas'

next/font descarga la fuente en build time, la sirve como asset estático propio (sin llamada a Google Fonts en producción) y genera automáticamente font-display: swap con métricas de fallback ajustadas al tamaño real de la fuente. El resultado: cero bloqueo de renderizado y layout shift mínimo, incluso con una serif con métricas muy distintas a la fuente de sistema.

Subconjuntos y pesos: solo lo que se usa

Una fuente editorial completa incluye pesos y variantes que casi nunca se usan en una landing (light, black, itálica completa). Limito el weight a los dos o tres pesos que realmente aparecen en el diseño — normalmente regular y semibold para body, y un peso más expresivo solo para el H1.

Conclusión

Carácter visual y rendimiento no son fuerzas opuestas si controlas qué fuente cargas, cuántos pesos y cómo se sirve. next/font hace ese control casi automático — el trabajo real es tener disciplina para no añadir un peso o una familia 'por si acaso'.