Fuentes web y rendimiento: por qué deberías autoalojar tus fuentes

¿Por qué las fuentes web son un problema de rendimiento?

Porque el navegador las descubre tarde y cada una puede bloquear tu texto. Cuando una página carga, el navegador solo descubre una fuente después de analizar el CSS, lo que crea una cascada —HTML, luego CSS, luego la petición de la fuente— y durante ese retraso el texto está invisible, un destello de texto invisible (FOIT), o se muestra en un fallback y luego se cambia, un destello de texto sin estilo (FOUT) que causa un desplazamiento de diseño (UDT, 2026). Ambos resultados dañan los Core Web Vitals: el FOIT retrasa el pintado del texto y daña el LCP, mientras que el FOUT introduce CLS cuando el cambio reajusta la página (Enepsters, 2026).

El peso se acumula rápido. Cada peso de fuente es una descarga aparte, así que una configuración típica con regular, itálica, negrita y negrita-itálica en dos familias son ocho archivos — potencialmente de 200 a 500KB de carga que bloquea el render (UDT, 2026). La tipografía representa cerca del 95% del diseño web, y aun así las fuentes siguen siendo uno de los cuellos de botella más ignorados: una sola familia sin optimizar puede añadir 500KB o más, retrasar el texto por segundos, y dañar tus puntuaciones (Enepsters, 2026). Las fuentes son la otra mitad del problema de pintado del hero que dominan las imágenes — juntas deciden qué tan rápido aparece tu primera pantalla.

¿Por qué es peor cargar desde Google Fonts?

Porque la comodidad añade una cadena de peticiones de terceros. Cada carga de Google Fonts significa que el navegador resuelve el DNS de fonts.googleapis.com, descarga un archivo CSS, y luego trae los archivos de fuente reales de fonts.gstatic.com — una cadena de peticiones de red que bloquean el render y pueden añadir cientos de milisegundos (Express Jam, 2026). Google Fonts se usa en cerca del 54% de todos los sitios, y la mayoría carga desde los servidores de Google y no desde los suyos (corewebvitals.io, 2026).

La defensa habitual —“Google Fonts ya está en caché de otros sitios que el visitante visitó”— dejó de ser cierta. Los navegadores modernos particionan su caché por sitio por privacidad, así que una fuente traída en el sitio A no se reutiliza en el sitio B; en la práctica cada sitio, y cada usuario, paga el costo por separado (Jono Alderson, 2026). Eso elimina el único argumento real para el CDN de terceros, y deja solo sus costos: latencia, resoluciones de DNS extra, y peticiones que no puedes precargar ni controlar (Jono Alderson, 2026).

¿Qué arregla el autoalojamiento?

Quita el viaje de ida y vuelta a terceros y te entrega los controles. Autoalojar elimina la resolución de DNS y el handshake TLS necesarios para conectar a los servidores de Google, lo que ahorra de 100 a 300ms según la ubicación y la red del visitante (Enepsters, 2026). Como los archivos ahora vienen de tu propio dominio, las peticiones van multiplexadas por la misma conexión HTTP/2 o HTTP/3 que el resto de tu página, sin sobrecarga de conexión extra (Express Jam, 2026). El monitoreo de usuarios reales lo respalda: los sitios que autoalojan con un preload adecuado ven una mejora del LCP mediano de cerca de 180ms frente al CDN de Google Fonts (corewebvitals.io, 2026).

La ganancia más profunda es el control. Cuando autoalojas, conoces la URL exacta de cada archivo, así que puedes precargar los críticos, poner cabeceras de caché agresivas medidas en meses, subdividir los archivos tú mismo, y elegir tu estrategia de font-display (corewebvitals.io, 2026). Lo único que cedes —la caché de borde de Google— se reemplaza fácil sirviendo tus propias fuentes por tu CDN existente, tras lo cual las fuentes autoalojadas rinden al menos igual de bien, y a menudo mejor (Enepsters, 2026). Todo el cambio toma unos diez minutos (corewebvitals.io, 2026).

El autoalojamiento y el RGPD

Hay una razón legal para autoalojar además de la técnica. En enero de 2022, el Tribunal Regional de Múnich dictaminó que cargar Google Fonts desde los servidores de Google viola el RGPD, porque transfiere la dirección IP del visitante a Google sin consentimiento (corewebvitals.io, 2026). Para cualquier sitio con visitantes europeos, eso convierte una preferencia de rendimiento en una de cumplimiento.

Autoalojar lo resuelve de forma limpia: cuando las fuentes se sirven desde tu propia infraestructura, ningún dato del visitante la abandona, así que no se envía nada a Google al cargar las fuentes (Enepsters, 2026). Es el mismo principio detrás de entregar un sitio con cero peticiones de terceros — cada conexión externa es una dependencia, una exposición de privacidad y un punto de fallo potencial, y un CDN de fuentes es uno que no necesitas. También es un ejemplo pequeño y concreto de poseer tus activos en vez de rentarlos, el tema de nuestra guía sobre el sitio que posees.

¿Qué formato, y qué tan pequeño?

Solo WOFF2, y luego subdivídelo. WOFF2 es el formato moderno más pequeño con la mejor compresión y soporte universal en navegadores modernos, así que en 2026 suele ser el único formato que necesitas — puedes saltarte WOFF, TTF y EOT salvo que una política específica exija soporte para navegadores muy viejos (Express Jam, 2026). Lista siempre WOFF2 primero en la regla @font-face.

Luego reduce el archivo con subsetting, que quita los caracteres que nunca mostrarás. Una fuente completa como Inter lleva más de 2.500 glifos, mientras que un sitio en inglés necesita cerca de 200 — el subsetting puede llevar un archivo de 90KB a cerca de 15KB (UDT, 2026). Herramientas como fonttools (pyftsubset), Glyphhanger o Font Squirrel generan los subconjuntos, y declaras el rango con unicode-range:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}

Para un sitio multilingüe, construye subconjuntos por idioma —fonts-en.css, fonts-es.css— para que un lector latino descargue solo glifos latinos y nadie pague por scripts que nunca ve (Jono Alderson, 2026).

¿Cómo las cargas sin bloquear?

Con un preload para la fuente crítica y un font-display deliberado. Precargar la una o dos fuentes que se pintan sobre la línea de flotación deja que el navegador empiece a descargarlas antes de terminar de analizar el CSS:

<link rel="preload" href="/fonts/inter-latin-400.woff2"
  as="font" type="font/woff2" crossorigin>

El atributo crossorigin es obligatorio incluso para fuentes autoalojadas — es una peculiaridad de la especificación, y sin él el navegador descarga la fuente dos veces (CB.VU, 2026). Precarga con mesura: solo fuentes sobre la línea de flotación, una o dos máximo, porque precargar demasiadas desperdicia ancho de banda y retrasa otros recursos críticos (CB.VU, 2026).

Luego elige tu política de primer pintado con font-display. Usa swap para el texto del cuerpo y los encabezados importantes, que muestra un fallback de inmediato y cambia a tu fuente cuando llega; usa optional para las fuentes decorativas o no críticas, que muestra el fallback y solo cambia si la fuente carga en unos 100ms — lo que significa cero desplazamiento de diseño (UDT, 2026). Es un ajuste poco usado: el Web Almanac 2025 halló que el 50% de las páginas usa swap pero solo el 0,5% usa optional, aunque optional es la mejor opción para los Core Web Vitals en fuentes no críticas (corewebvitals.io, 2026). Evita block, que puede ocultar el texto hasta tres segundos.

¿Cómo detienes el desplazamiento de diseño?

Haciendo que la fuente de fallback ocupe el mismo espacio que la real. El desplazamiento ocurre porque, cuando swap reemplaza el fallback por tu fuente web, las dos rara vez comparten métricas idénticas, así que las líneas se reajustan y el contenido alrededor salta (Jono Alderson, 2026). El arreglo es un @font-face de fallback que iguale, usando los overrides de métricas de CSS —size-adjust, ascent-override, descent-override y line-gap-override— para escalar y alinear el fallback de modo que se comporte como tu fuente real:

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
}
body { font-family: 'Inter', 'Inter Fallback', sans-serif; }

Cuando ocurre el cambio, nada se mueve, porque el fallback ya tenía la forma correcta (Express Jam, 2026). Una herramienta como el Font Style Matcher ayuda a hallar los valores de override para un par dado (Jono Alderson, 2026). Combinado con el subsetting y el preload, esto suele quitar de 300 a 500ms de tiempo de carga de fuente en una conexión lenta y elimina los desplazamientos de diseño por completo (Express Jam, 2026).

Menos pesos, y fuentes variables

La fuente más barata es la que no cargas. Quédate con el número mínimo de pesos —a menudo solo regular y negrita— en vez de enviar seis pesos en todo el sitio porque la guía de marca los lista; un presupuesto sensato es no más de tres pesos y ninguna fuente sobre 200KB comprimida (Jono Alderson, 2026; DEV, 2025). Y si de verdad necesitas varios pesos, una fuente variable es una ganancia clara: un solo archivo cubre todo un rango de pesos, así que una fuente variable de 80KB reemplaza tres archivos estáticos de 40KB en cuanto usas tres o más pesos (CB.VU, 2026).

Una última fuente de peso oculto son las fuentes de iconos, que cargan toda una tipografía para dibujar un puñado de símbolos. Prefiere iconos SVG en línea, que quitan la decodificación de la fuente de la ruta crítica de render por completo (Apogee Watcher, 2026). Cada una de estas decisiones es pequeña por sí sola; juntas deciden si tu tipografía son unos pocos kilobytes o medio megabyte. Y si un proyecto lo tolera, una pila de fuentes del sistema envía cero bytes de fuente web — la opción más rápida que hay, y la correcta cuando una tipografía de marca a medida no es esencial para el diseño (Apogee Watcher, 2026).

El beneficio — y lo que hacemos

Hechos juntos, estos pasos convierten las fuentes de un pasivo en un no-problema: WOFF2 autoalojado, subdividido a tus caracteres, precargado con crossorigin, un font-display deliberado, y métricas de fallback que mantienen el diseño quieto. El resultado es un primer pintado más rápido, sin desplazamiento de diseño por fuentes, sin dependencia de terceros, y sin exposición de RGPD — por quizá diez minutos de configuración que luego corren en cada página.

Esto también es sencillamente cómo está construido nuestro propio sitio: cada tipo está autoalojado como WOFF2 subdividido, servido desde nuestro propio dominio con cero peticiones de terceros, que es parte de por qué saca 100 y aprueba los Core Web Vitals por defecto. Lo sostenemos como prueba y no como promesa — un estudio que vende rendimiento debería aprobar su propia auditoría. Las fuentes son una mitad del problema de pintado del hero; la otra mitad la cubre nuestra guía sobre cómo optimizar las imágenes para la web, y ambas se sientan bajo el cuadro más grande de Core Web Vitals y velocidad web, que es el lugar al que ir después.