Las fuentes web personalizadas embellecen cualquier sitio, pero cada fuente que añades es un recurso externo que el navegador tiene que descargar antes de mostrar el texto. Elegirlas y configurarlas bien puede ser la diferencia entre una página que carga en 1 segundo y una que tarda 4.
¿Qué son las fuentes web?
Una fuente web (web font) es un archivo de tipografía que el navegador descarga desde un servidor —propio o externo— para renderizar el texto de tu página. A diferencia de las fuentes del sistema (Arial, Times New Roman…), las fuentes web te permiten mantener una identidad tipográfica coherente en cualquier dispositivo, sin depender de lo que el usuario tenga instalado.
El estándar actual se define en CSS con la regla @font-face, que indica al navegador dónde encontrar el archivo y qué nombre darle dentro de las hojas de estilo.
Principales formatos de fuentes web
El formato determina el peso del archivo y la compatibilidad con los navegadores. Hoy en día prácticamente solo importan dos:
- WOFF2 — el formato moderno y recomendado. Compresión Brotli integrada; entre 30 % y 50 % más ligero que TTF. Compatible con todos los navegadores actuales.
- WOFF — la versión anterior, también ampliamente soportada. Útil como fallback para navegadores muy antiguos.
- TTF / OTF — archivos de escritorio usados en web solo si el proveedor no ofrece WOFF2. Son más pesados.
- EOT / SVG — obsoletos; solo necesarios para IE6-8 y versiones muy antiguas de Safari móvil. Puedes ignorarlos.
Conclusión práctica: sirve siempre WOFF2 como primera opción y WOFF como respaldo.
Tipos de fuentes web según su origen
Fuentes alojadas en CDN externo (Google Fonts, Adobe Fonts…)
Son la opción más cómoda: añades una etiqueta <link> y el CDN sirve el archivo. Sin embargo, implican una conexión a un dominio externo (DNS lookup + TCP handshake + TLS) que puede sumar entre 100 ms y 300 ms dependiendo de la latencia del usuario.
Google Fonts es gratuita y cubre casi cualquier necesidad tipográfica, pero desde la perspectiva del rendimiento siempre es mejor autoalojar la fuente.
Fuentes autoalojadas (self-hosted)
Descargas los archivos y los sirves desde tu propio hosting o CDN. Eliminas la conexión externa y controlas las cabeceras de caché. Es la práctica recomendada para sitios que priorizan velocidad.
Herramientas como el equipo de elenlace.com o google-webfonts-helper te permiten descargar los subconjuntos que necesitas en WOFF2 en minutos.
Fuentes del sistema (system fonts)
Usan tipografías ya instaladas en el dispositivo: system-ui, -apple-system, Segoe UI… No requieren descarga alguna, así que el impacto en rendimiento es cero. Es la elección de sitios que priorizan velocidad absoluta sobre identidad de marca.
Cómo afectan las fuentes web a la velocidad de carga
Flash of Invisible Text (FOIT)
El navegador espera a tener la fuente descargada antes de mostrar el texto. Mientras tanto, el contenido permanece invisible. Esto afecta al Largest Contentful Paint (LCP) y a la experiencia del usuario.
Flash of Unstyled Text (FOUT)
Con la propiedad CSS font-display: swap, el texto se muestra con una fuente de respaldo y luego cambia a la fuente web cuando está lista. Evita el FOIT, aunque puede provocar un pequeño salto visual que afecta al Cumulative Layout Shift (CLS).
Bloqueo de renderizado
Si el archivo CSS que declara las fuentes se carga de forma bloqueante, el navegador no puede pintar nada en pantalla hasta descargarlo. El atributo preconnect (para CDN externos) y el preload de la fuente más crítica reducen este tiempo.
Peso de los archivos
Una familia tipográfica completa (varios pesos y estilos) puede sumar fácilmente 500 KB. Cargar solo los subconjuntos que usas —por ejemplo, solo latín, solo Regular y Bold— puede reducir ese peso en un 70 %.
| Práctica | Impacto en velocidad |
|---|---|
| CDN externo sin preconnect | +100–300 ms de latencia extra |
| Fuente autoalojada en WOFF2 | Reducción del 30–50 % en peso |
font-display: swap |
Elimina el FOIT; puede afectar CLS mínimamente |
| Preload de la fuente crítica | Reduce LCP hasta 200 ms |
| Subconjunto solo latín | Archivo hasta 70 % más pequeño |
Buenas prácticas para fuentes web rápidas
- Autoaloja tus fuentes siempre que sea posible para eliminar conexiones a dominios externos.
- Usa WOFF2 como formato principal.
- Limita los pesos y estilos: solo los que realmente aparecen en el diseño.
- Añade
font-display: swapen tu@font-facepara evitar texto invisible. - Usa
<link rel="preload" as="font">para la fuente del cuerpo de texto. - Si usas Google Fonts desde su CDN, añade
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>. - Genera subconjuntos con solo los caracteres que necesitas (ej. latín básico para sitios en español).
Si necesitas ayuda para auditar y optimizar las fuentes de tu sitio, el equipo de elenlace.com puede hacer una revisión completa de rendimiento. También puedes explorar más recursos en nuestra sección de artículos sobre rendimiento web.
Conclusiones clave
- Las fuentes web son archivos de tipografía descargados por el navegador; su impacto en velocidad depende de cómo se sirvan.
- WOFF2 es el formato óptimo: más ligero gracias a la compresión Brotli.
- Autoalojar las fuentes elimina la latencia extra de un CDN externo.
font-display: swapevita el texto invisible (FOIT) durante la carga.- Precargar la fuente crítica y usar solo los subconjuntos necesarios puede reducir el LCP en cientos de milisegundos.
¿Quieres saber si las fuentes de tu sitio están ralentizando tu negocio? Solicita una auditoría de rendimiento gratuita con el equipo de elenlace.com y descubre qué tan rápido puede llegar a ser tu web.
Preguntas frecuentes
¿Cuántas fuentes web debería usar en mi sitio?
Lo ideal es no más de dos familias tipográficas: una para títulos y otra para el cuerpo. Cada familia adicional suma peso y conexiones, por lo que menos siempre es más rápido.
¿Google Fonts afecta el rendimiento de mi sitio?
Sí, porque implica conectarse a un dominio externo. La forma más eficiente es descargar los archivos de Google Fonts y autoalojarlos en tu propio servidor, eliminando la conexión adicional.
¿Qué es font-display: swap?
Es una propiedad CSS que indica al navegador que muestre inmediatamente el texto con una fuente de respaldo mientras descarga la fuente web. Evita el "texto invisible" y mejora la experiencia del usuario durante la carga.
¿El formato de fuente importa para SEO?
Indirectamente sí: un formato más pesado (TTF vs WOFF2) aumenta el tiempo de carga, lo que puede perjudicar métricas como el LCP, que Google usa como señal de experiencia de página. Optimizar las fuentes es, por tanto, también una práctica de SEO técnico.
Para saber más
Otros proveedores y guías que vale la pena comparar:
