≡En resumen
- Una fuente web es un archivo que el navegador descarga, así que cuenta como cualquier otro recurso en el tiempo de carga.
- Usa solo WOFF2: tiene la mejor compresión y lo admiten todos los navegadores actuales.
- font-display decide si el texto se oculta o se muestra con una fuente de sustitución mientras la fuente carga.
- Menos familias y pesos, subconjuntos de caracteres y fuentes variables reducen el peso total.
- Alojar las fuentes en tu propio servidor evita enviar la IP de tus visitantes a terceros, un riesgo señalado por la justicia alemana en 2022.
01 ¿Qué son las web fonts o fuentes web?
Durante los primeros años de la web, los diseñadores solo podían usar las «fuentes seguras»: las que venían instaladas en casi todos los ordenadores, como Arial, Times New Roman o Verdana. Cualquier otra tipografía había que convertirla en imagen. Las web fonts resolvieron ese límite: la web indica en su CSS dónde está el archivo de la fuente y el navegador lo descarga al visitar la página.
Una fuente web no es un estilo de letra distinto, sino una forma de distribuirlo. Cualquier tipo de letra con licencia para uso web puede servirse como fuente web.
02 Formatos de fuentes web: de EOT a WOFF2
| Formato | Qué es | ¿Usarlo hoy? |
|---|---|---|
| EOT | Embedded OpenType, formato propietario de Microsoft para Internet Explorer | No, solo lo entendía Internet Explorer |
| SVG fonts | Fuentes definidas en SVG, usadas en las primeras versiones de Safari para iOS | No, formato obsoleto con soporte residual |
| TTF / OTF | Formatos de escritorio TrueType y OpenType, sin compresión específica para la web | Solo como origen para generar WOFF2 |
| WOFF | Web Open Font Format 1.0, Recomendación del W3C desde diciembre de 2012 | Ya no es necesario como alternativa |
| WOFF2 | Web Open Font Format 2.0, con compresión Brotli; Recomendación del W3C desde marzo de 2018 | Sí, es el único formato que necesitas |
03 Cómo se cargan: @font-face y font-display
@font-face { font-family: "Marca"; src: url("/fonts/marca-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
Después basta con usarla en el CSS: body { font-family: "Marca", system-ui, sans-serif; }. Las fuentes que siguen a «Marca» son las de sustitución si la descarga falla o tarda.
El navegador no descarga una fuente declarada hasta que algún texto visible la necesita. Mientras llega, tiene dos opciones: ocultar el texto (FOIT, flash of invisible text) o mostrarlo con la fuente de sustitución y cambiarla después (FOUT, flash of unstyled text). El descriptor font-display elige entre esos comportamientos.
| Valor | Periodo de bloqueo (texto invisible) | Periodo de intercambio | Cuándo usarlo |
|---|---|---|---|
| auto | Lo decide el navegador | Lo decide el navegador | Valor por defecto |
| block | Corto | Infinito | Fuentes de iconos o logotipos en texto |
| swap | Extremadamente corto | Infinito | Titulares y marca, aceptando un cambio visible |
| fallback | Extremadamente corto | Corto | Texto de lectura: si la fuente tarda, se queda la de sustitución |
| optional | Extremadamente corto | Ninguno | Cuando la velocidad manda; la fuente se usa si ya está en caché o llega enseguida |
04 Fuentes web y rendimiento: cómo cargarlas sin frenar la página
88 %
Páginas móviles que usan fuentes web
Fuente: HTTP Archive, Web Almanac 2025
65 %
Peticiones de fuentes en formato WOFF2
Fuente: HTTP Archive, Web Almanac 2025
50,1 %
Páginas móviles con font-display: swap
Fuente: HTTP Archive, Web Almanac 2025
41,3 %
Webs móviles con al menos una fuente variable
Fuente: HTTP Archive, Web Almanac 2025
- ✓Limita familias y pesos: cada combinación de peso y estilo es un archivo más.
- ✓Usa una fuente variable si necesitas muchos pesos: un solo archivo cubre todo el rango.
- ✓Crea subconjuntos con los caracteres que usas (latín básico y extendido) y declara unicode-range.
- ✓Precarga solo la fuente crítica del primer pantallazo con rel="preload" y el atributo crossorigin.
- ✓Ajusta la fuente de sustitución con size-adjust y descriptores de métricas para reducir el salto de diseño (CLS).
- ✓Sirve las fuentes con caché de larga duración y compresión desde tu servidor o CDN.
- ✓Valora una pila de fuentes del sistema para el texto largo si la marca no exige otra.
Las fuentes suelen aparecer entre los recursos que retrasan el primer renderizado y provocan saltos de diseño. Revisarlas es una de las tareas habituales cuando se trabaja la velocidad de carga web.
05 Autoalojar o usar un servicio externo: rendimiento y RGPD
Servicio externo
Google Fonts, Adobe Fonts u otros sirven los archivos y el CSS desde sus servidores. Es cómodo, pero el navegador del visitante se conecta a un tercero y le envía su IP.
Autoalojamiento
Descargas las fuentes (si la licencia lo permite) y las sirves desde tu dominio. Tienes control total de caché, subconjuntos y privacidad, y ahorras conexiones a otros dominios.
La tendencia va en esa dirección: según el Web Almanac 2025, el 31,5 % de las webs de escritorio y el 36,4 % de las móviles usan solo fuentes autoalojadas. Si usas Google Fonts, te explicamos cómo funciona la API de Google Fonts y cómo servirla desde tu servidor.
06 Licencias de las fuentes web
Una fuente es software y se usa bajo licencia. Tener instalada una tipografía en tu ordenador no te da derecho a subirla a tu servidor: muchas fundiciones venden licencias de escritorio y de web por separado, y las de web pueden limitarse por número de visitas o de dominios.
| Modelo | Cómo funciona | Ejemplo |
|---|---|---|
| Licencia libre | Uso, modificación y autoalojamiento permitidos, también en proyectos comerciales | SIL Open Font License, la de la mayoría del catálogo de Google Fonts |
| Suscripción | Las fuentes se sirven desde la plataforma mientras dure la suscripción | Adobe Fonts |
| Licencia web de fundición | Pago por la fuente con condiciones de uso web, a menudo por visitas o dominios | Fundiciones tipográficas independientes |
07 Cómo elegir fuentes web para un proyecto
-
1
Parte de la marca y del texto
Define qué fuente va en titulares y cuál en texto largo; a menudo una sola familia variable basta.
-
2
Comprueba la licencia web
Confirma que permite el uso web y, si quieres autoalojarla, que lo permite expresamente.
-
3
Revisa los idiomas
Que incluya ñ, tildes, ç y los signos de todos los idiomas de tu web.
-
4
Prueba la legibilidad en móvil
A tamaño de texto real, con pantallas pequeñas y modo oscuro.
-
5
Mide antes y después
Compara peso de fuentes, tiempo de renderizado y CLS al incorporarlas.
La tipografía es una de las decisiones que más definen una marca en pantalla, por eso en un proyecto de diseño web profesional se elige junto con la paleta y la estructura, y se implementa pensando desde el principio en el rendimiento.
Preguntas frecuentes sobre Web Fonts
Son fuentes tipográficas que el navegador descarga desde un servidor mediante la regla @font-face de CSS, para mostrar un texto con una tipografía que el usuario no tiene instalada.
WOFF2. Tiene la mejor compresión y lo admiten todos los navegadores actuales, así que ya no hace falta servir WOFF, TTF, EOT ni SVG como alternativa.
Muestra el texto de inmediato con la fuente de sustitución y la cambia por la fuente web cuando termina de descargarse. Evita el texto invisible, a cambio de un cambio visual que puede provocar saltos de diseño.
Las fuentes tienen licencias libres, pero cargarlas desde los servidores de Google envía la IP del visitante a un tercero. Un tribunal de Múnich lo consideró contrario al RGPD en 2022 sin consentimiento, por lo que lo más seguro es autoalojarlas.
De forma indirecta: pueden retrasar la visualización del texto y provocar saltos de diseño que empeoran las métricas de experiencia de página. Bien optimizadas, su impacto es pequeño.
Es un único archivo de fuente que contiene un rango continuo de pesos, anchuras u otros ejes. Sustituye a varios archivos estáticos y suele reducir el número de descargas.
Solo si su licencia permite el uso web. Muchas licencias de escritorio no lo incluyen, así que revisa las condiciones de la fundición antes de subirla a tu servidor.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗