Carga de fuentes en menú: evitar cambios de diseño y texto invisible

Pasaste horas eligiendo la tipografía perfecta para tu tienda. Las etiquetas del menú usan una fuente sans-serif personalizada que coincide exactamente con tu marca. Pero cada vez que pruebas tu tienda en móvil, ves un destello de texto invisible donde debería estar el menú, seguido de un cambio de diseño cuando la fuente finalmente carga. Tu puntuación de CLS es 0.18, que Google marca como “necesita mejora”, y sospechas que la fuente del menú es la culpable.

El problema no es la fuente en sí. El problema es cómo el navegador maneja la carga de fuentes. Por defecto, la mayoría de los navegadores ocultan el texto hasta que las fuentes personalizadas terminen de descargarse, lo cual puede tomar de 300 a 800 milisegundos en una conexión móvil lenta. El área del menú permanece vacía, la página se ve rota, y cuando la fuente finalmente aparece, desplaza todo lo que está debajo. Esto perjudica tanto el LCP (porque contenido importante se retrasa) como el CLS (porque el diseño se mueve).

Este artículo explica las cinco estrategias de font-display, cuál funciona mejor para menús de navegación, y cómo implementar la carga de fuentes que no afecte tu marca ni tus Core Web Vitals.

Los Dos Problemas de Carga de Fuentes: FOIT y FOUT

Cuando un navegador encuentra una fuente web personalizada, tiene que decidir qué hacer con el texto que usa esa fuente mientras el archivo de fuente aún se está descargando. Hay dos comportamientos posibles, cada uno con ventajas y desventajas.

Flash of Invisible Text (FOIT)

El navegador oculta el texto hasta que la fuente carga. El espacio del texto se reserva, pero nada aparece. Si la fuente tarda 500 milisegundos en descargarse, el usuario mira un espacio en blanco durante medio segundo. Este es el comportamiento predeterminado en la mayoría de los navegadores.

FOIT es malo para el LCP porque el contenido de texto importante no es visible hasta que la fuente carga. También es malo para la usabilidad—los usuarios no pueden leer el menú, lo que puede hacerles pensar que la página está rota.

Flash of Unstyled Text (FOUT)

El navegador muestra el texto inmediatamente usando una fuente alternativa (generalmente una fuente del sistema como Arial o Helvetica), luego cambia a la fuente personalizada una vez que carga. El texto es legible de inmediato, pero el cambio puede causar un desplazamiento de diseño si la fuente alternativa y la fuente personalizada tienen dimensiones diferentes.

FOUT es mejor para el LCP (el texto aparece inmediatamente) pero puede perjudicar el CLS si no se maneja cuidadosamente. La clave es hacer coincidir las dimensiones de la fuente alternativa con la fuente personalizada lo más cerca posible.

Las Cinco Estrategias de font-display

La propiedad CSS font-display controla cómo los navegadores manejan el período de carga de fuentes. Hay cinco valores posibles, cada uno con diferentes tiempos y comportamiento de alternativa.

Para menús de navegación, font-display: swap es casi siempre la opción correcta. Hace que el menú sea legible inmediatamente (bueno para LCP y usabilidad) y cambia a la fuente de marca tan pronto como carga (bueno para consistencia de marca). El riesgo es el cambio de diseño, que abordaremos en un momento.

Cómo Usar font-display en Tu Hoja de Estilos

Si tu fuente se define en tu CSS usando @font-face, añade la propiedad font-display:

@font-face {
  font-family: 'BrandFont';
  src: url('/fonts/brandfont.woff2') format('woff2');
  font-display: swap;
}

.menu-link {
  font-family: 'BrandFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

El stack de font-family es importante. Lista tu fuente personalizada primero, luego fuentes del sistema como alternativas. Esto asegura que el texto del menú aparezca al instante en una fuente del sistema, luego cambie a tu fuente personalizada cuando cargue.

Si tu fuente se carga desde Google Fonts, añade el parámetro display=swap a la URL:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">

Google Fonts inyectará automáticamente font-display: swap en el CSS generado.

Prevenir Cambios de Diseño con Coincidencia de Fuente Alternativa

El problema con font-display: swap es que si la fuente alternativa y la fuente personalizada tienen tamaños o espaciado diferentes, el texto se reflujará cuando ocurra el cambio, causando un desplazamiento de diseño. Esto es especialmente notable en menús de navegación, donde incluso un pequeño cambio puede mover todo el contenido de la página.

La solución es ajustar la fuente alternativa para que coincida con las dimensiones de la fuente personalizada usando las propiedades size-adjust, ascent-override y descent-override. Estas son características CSS relativamente nuevas (compatibles con todos los navegadores modernos a partir de 2024) que te permiten ajustar una fuente alternativa para que coincida con una fuente personalizada.

Aquí hay un ejemplo:

@font-face {
  font-family: 'BrandFont';
  src: url('/fonts/brandfont.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'BrandFont Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 95%;
  descent-override: 25%;
}

.menu-link {
  font-family: 'BrandFont', 'BrandFont Fallback', Arial, sans-serif;
}

La propiedad size-adjust escala la fuente alternativa para que su altura x coincida con la fuente personalizada. Las propiedades ascent-override y descent-override ajustan el espaciado vertical.

Encontrar los valores correctos requiere prueba. Herramientas como Fallback Font Generator de Simon Hearne automatizan este proceso. Introduces tu fuente personalizada, y la herramienta calcula los valores de anulación óptimos para fuentes del sistema comunes.

Hacer coincidir fuentes alternativas de esta manera reduce el CLS del cambio de fuente a casi cero. El texto aún cambia de la alternativa a la fuente personalizada, pero el diseño no se desplaza porque las dimensiones son idénticas.

Fuentes del Sistema: La Alternativa de Costo Cero

La fuente más rápida es ninguna fuente en absoluto—o mejor dicho, una fuente del sistema que ya está instalada en el dispositivo del usuario. Las fuentes del sistema tienen costo cero de descarga, costo cero de análisis, y riesgo cero de cambio de diseño.

Aquí hay un stack moderno de fuentes del sistema que se ve bien en todas las plataformas:

.menu-link {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
}

Esto te da:

• San Francisco en macOS e iOS
• Segoe UI en Windows
• Roboto en Android
• Valores predeterminados apropiados para la plataforma en Linux

Las fuentes del sistema no son tan distintivas como las tipografías personalizadas, pero son limpias, legibles y optimizadas para sus plataformas. Muchos sitios de alto tráfico (GitHub, Medium, WordPress.com) usan fuentes del sistema por razones de rendimiento.

Si tus directrices de marca requieren una fuente personalizada, considera usar fuentes del sistema para el menú de navegación y reservar la fuente personalizada para encabezados, texto heroico, o cuerpo donde tenga más impacto visual. El menú es interfaz funcional. No necesita llevar la marca tan fuertemente como un encabezado.

Precargar Fuentes para Reducir la Duración del FOUT

Incluso con font-display: swap, hay un retraso entre cuando aparece la alternativa y cuando la fuente personalizada cambia. En una conexión lenta, esto puede ser 500 milisegundos o más. Precargar el archivo de fuente le dice al navegador que lo obtenga con alta prioridad al principio de la carga de la página, lo que reduce el retraso del cambio.

<link rel="preload" href="/fonts/brandfont.woff2" as="font" type="font/woff2" crossorigin>

El atributo crossorigin es requerido incluso si la fuente se aloja en tu propio dominio, porque las fuentes se obtienen con modo CORS.

Precargar no elimina el FOUT, pero reduce la duración. Si tu fuente de menú es pequeña (menos de 50KB) y crítica para la marca, precargar puede mejorar el rendimiento percibido.

Precaución: Precargar compite con otros recursos críticos como CSS y JavaScript. Solo precarga fuentes que se usen por encima del pliegue y sean realmente esenciales. Precargar demasiados recursos puede ralentizar el renderizado inicial.

Fuentes de Iconos vs SVG En Línea

Muchos menús de navegación usan fuentes de iconos (Font Awesome, Remix Icon, Material Icons) para flechas, iconos de búsqueda e iconos de hamburguesa. Las fuentes de iconos son solo fuentes, así que tienen las mismas características de carga que las fuentes de texto: FOIT por defecto, riesgo de cambio de diseño, y costo de descarga (a menudo 50-150KB para una fuente de iconos completa).

SVG en línea es una mejor opción para iconos de menú. Un SVG en línea es parte del HTML, así que aparece inmediatamente sin solicitud de red y sin retraso de carga de fuentes. También escala perfectamente y soporta estilos CSS.

Aquí hay un ejemplo:

<button class="menu-toggle" aria-label="Open menu">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <line x1="3" y1="12" x2="21" y2="12"></line>
    <line x1="3" y1="6" x2="21" y2="6"></line>
    <line x1="3" y1="18" x2="21" y2="18"></line>
  </svg>
</button>

Este icono de hamburguesa es 200 bytes. Una fuente de iconos completa con 2,000 iconos que nunca usarás es 150KB. SVG en línea también elimina el problema de FOIT—el icono aparece al instante porque es parte del HTML.

Las apps de menú modernas como Navi+ usan SVG en línea para todos los iconos, que es una razón por la que evitan los problemas de cambio de diseño que afectan a menús basados en fuentes de iconos.

Carga de Fuentes Específica de Shopify

Los temas de Shopify generalmente cargan fuentes de una de tres maneras: desde Google Fonts, desde el CDN de Shopify (a través del selector de fuentes de configuración del tema), o desde archivos de fuente personalizados en la carpeta de activos del tema.

Google Fonts

Si tu tema usa Google Fonts, asegúrate de que el parámetro display=swap esté en la URL. Busca en theme.liquid una línea como esta:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600">

Cámbiala a:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">

Fuentes del CDN de Shopify

Si tu tema usa el selector de fuentes integrado de Shopify (Settings > Typography), Shopify sirve las fuentes desde su CDN e incluye automáticamente font-display: swap a partir de 2023. No necesitas hacer nada.

Archivos de Fuente Personalizada

Si cargaste archivos de fuente personalizada en la carpeta de activos de tu tema, añade font-display: swap a la declaración @font-face en tu CSS.

Medir el Impacto de la Carga de Fuentes

Usa Chrome DevTools para ver cómo las fuentes afectan tu LCP y CLS.

Comprobar FOIT

Abre DevTools, ve a la pestaña Network, filtra por “Font”, y recarga la página. Observa el área del menú. Si el texto del menú es invisible durante un período notable antes de aparecer, tienes FOIT. Añade font-display: swap para solucionarlo.

Comprobar Cambio de Diseño

Abre DevTools, ve a la pestaña Performance, haz clic en Record, recarga la página, y detén la grabación. Busca barras rojas de “Layout Shift” en la sección Experience. Haz clic en una para ver qué elementos se desplazaron. Si el texto del menú aparece en la lista, el cambio de fuente causó un desplazamiento de diseño. Usa coincidencia de fuente alternativa para solucionarlo.

Medir CLS

Ejecuta una prueba de Lighthouse (en DevTools o PageSpeed Insights). Busca la puntuación de CLS y el diagnóstico “Avoid large layout shifts”. Si las fuentes aparecen como causa, necesitas mejor coincidencia de alternativas o deberías considerar cambiar a fuentes del sistema.

Ganancia rápidaSi tu menú usa una fuente personalizada y estás viendo problemas de CLS, intenta cambiar a un stack de fuentes del sistema como prueba. Ejecuta Lighthouse de nuevo. Si el CLS baja significativamente, la fuente personalizada fue el problema. Luego puedes decidir si el valor de marca de la fuente personalizada vale el costo de rendimiento, o implementar coincidencia de alternativas para obtener ambos.

Cómo Se Ve la Carga de Fuentes de Menú Bien Hecha

Un menú de navegación bien optimizado maneja las fuentes de una de dos maneras.

Opción 1: Fuentes del sistema. Sin fuentes personalizadas, costo cero de descarga, FOIT cero, cambio de diseño cero. El menú aparece al instante con texto con apariencia nativa.

.menu-link {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

Opción 2: Fuente personalizada con swap y coincidencia de alternativa. El texto del menú aparece inmediatamente en una fuente del sistema, luego cambia a la fuente personalizada sin cambio de diseño.

@font-face {
  font-family: 'BrandFont';
  src: url('/fonts/brandfont.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'BrandFont Fallback';
  src: local('Arial');
  size-adjust: 107%;
}

.menu-link {
  font-family: 'BrandFont', 'BrandFont Fallback', Arial, sans-serif;
}

Ambos enfoques resultan en un menú que es legible dentro del primer segundo de carga de la página, que es lo que mide LCP. El primer enfoque es más simple y rápido. El segundo enfoque preserva la consistencia de marca con costo de rendimiento mínimo.

Para iconos, usa SVG en línea en lugar de fuentes de iconos. Los iconos aparecen al instante, escalan perfectamente, y cuestan algunos cientos de bytes en lugar de 150KB.

La mayoría de las tiendas que cambian de carga de fuentes predeterminada (FOIT, sin coincidencia de alternativa) a uno de estos patrones ven que el CLS baja de 0.05 a 0.15 puntos y el LCP mejora de 200 a 400 milisegundos en móvil. El menú se ve igual para el usuario, pero el navegador lo renderiza más rápido y suavemente.

Este artículo es parte de la guía más grande sobre Menú y LCP: cómo la navegación bloquea tu largest contentful paint.