font-display: swap y fuentes web en tu web de empresa: cómo evitar texto invisible y acelerar la primera lectura

Abres tu web en el móvil y durante un segundo no ves titulares ni botones: solo un bloque gris o texto invisible hasta que termina de cargar la fuente de Google. Ese parpadeo se llama FOIT (Flash of Invisible Text) y en 2026 sigue siendo uno de los detalles que más resta confianza en webs de empresa, sobre todo después de optimizar imágenes y Critical CSS.

La propiedad CSS font-display: swap y una estrategia clara de fuentes web (autoalojadas o de terceros) permiten mostrar texto legible de inmediato con una fuente de sistema y sustituirla por la corporativa cuando esté lista. Este artículo explica cómo encaja con FCP, LCP y la tipografía de marca, qué valores usar y qué errores evitar.

Qué es font-display y por qué importa en una web corporativa

Cuando el navegador encuentra una regla @font-face, descarga el archivo (WOFF2, WOFF, etc.) antes de pintar el texto con esa familia — salvo que indiques otro comportamiento. Sin font-display, muchos navegadores ocultan el texto hasta que la fuente llega o agotan un tiempo de espera.

• swap: muestra texto de inmediato con fallback y cambia a la fuente web cuando carga (puede haber un ligero «salto» visual).
• optional: solo usa la fuente web si llega muy rápido; en conexiones lentas se queda el fallback (útil en móvil).
• block: oculta texto brevemente y luego muestra la fuente (riesgo de FOIT).
• fallback: periodo corto invisible y luego fallback si la fuente tarda.

En webs de empresa, donde el mensaje y los CTAs deben leerse al instante, swap o optional suelen ser la opción más equilibrada entre marca y rendimiento.

Relación con rendimiento y Core Web Vitals

Las fuentes no suelen ser el LCP en sí, pero retrasan el primer texto visible y pueden empeorar el FCP si bloquean el render. Combínalas con preload de la variante crítica, subconjuntos de caracteres y font-display: swap en cada @font-face.

Si el titular del hero es el LCP, asegura que el peso de esa variante (por ejemplo Bold 700) sea mínimo y que el CSS crítico incluya el fallback con métricas similares para reducir CLS al hacer swap.

Google Fonts y fuentes de terceros

El parámetro display=swap en la URL de Google Fonts activa swap en los @font-face servidos. Aun así, cada familia extra añade peticiones y peso: limita variantes (400, 600, 700) e idiomas (latin, latin-ext) a lo que realmente usas.

Alternativa con más control: descargar los WOFF2, autoalojarlos en tu dominio y servirlos con cabeceras de caché largas. Así reduces dependencia de terceros y alineas con menos scripts externos.

Autoalojar fuentes (pasos prácticos)

1. Identifica familias y pesos usados en home, servicios y blog (auditoría en DevTools → Computed).
2. Genera o exporta WOFF2 (herramientas como google-webfonts-helper o el build de tu diseñador).
3. Define @font-face con font-display: swap, unicode-range si aplicas subconjuntos y font-weight explícito.
4. Preload solo la variante del above-the-fold: <link rel="preload" href="/fonts/brand-regular.woff2" as="font" type="font/woff2" crossorigin>.
5. Configura caché en el servidor o CDN para /fonts/*.

La documentación de web.dev sobre mejores prácticas de fuentes recomienda limitar familias, usar WOFF2 y evitar cargar pesos que no aparecen en la página.

Elegir fallbacks que minimicen el salto

El «flash» al cambiar de Arial a tu fuente custom se reduce si el fallback tiene métricas parecidas. CSS moderno ofrece size-adjust, ascent-override y descent-override en el fallback local para acercar la caja al diseño final. Herramientas como fallback font generators ayudan a afinar valores por familia.

Revisa también la jerarquía tipográfica: si el cuerpo usa 18px y el menú 15px, el crítico debe incluir ambos tamaños con el mismo stack.

Qué mejoras esperar (referencias 2026)

• FOIT eliminado: el usuario lee el titular en el primer frame útil.
• FCP: mejoras de 0,2–0,8 s en móvil son habituales al pasar de block implícito a swap + preload selectivo.
• Peso: pasar de 6 pesos a 2 en WOFF2 suele recortar 200–400 KB de transferencia en la primera visita.
• Privacidad: autoalojar evita que el visitante contacte dominios de fuentes solo por abrir tu home.

Mide en Lighthouse y en el informe de Core Web Vitals antes y después del despliegue.

Errores frecuentes con fuentes web

• Importar toda la familia desde Google Fonts con 8 pesos e itálicas que nadie usa.
• Olvidar crossorigin en preload de fuentes (el preload falla en silencio).
• Usar font-display: block «porque se ve más limpio» y perder lectores en 3G.
• No definir fallback en el CSS crítico: el swap provoca saltos de layout.
• Cargar fuentes desde otro dominio sin preconnect cuando sigues usando CDN de terceros.

Checklist antes del próximo despliegue

1. Audita Network: filtra «font» y anota peso total y orden de carga.
2. Añade font-display: swap (o optional en cuerpo de texto) en cada @font-face.
3. Preload solo la variante del hero o titular principal.
4. Ajusta fallback con size-adjust si el salto es visible.
5. Verifica legibilidad y contraste tras el swap en móvil real.

Conclusión

font-display: swap no es un truco de laboratorio: es la forma más directa de que tu web de empresa comunique desde el primer segundo, sin sacrificar la identidad visual cuando la fuente corporativa termina de cargar. Encaja con Critical CSS, subconjuntos y menos pesos innecesarios. Si quieres auditar fuentes, autoalojarlas y dejar el pipeline listo para marketing, en aatsoft podemos integrarlo en tu build sin fricción.