Autohospedar fuentes de Google para mejorar las Core Web Vitals

Autohospedar Google Fonts para mejorar las Core Web Vitals

Google Fonts se utiliza en el 54% de todos los sitios web según el Web Almanac de 2025. La mayoría de esos sitios cargan fuentes desde los servidores de Google. Eso es un problema. Cada solicitud a Google Fonts agrega conexiones externas, CSS que bloquea el renderizado y archivos de fuentes que no se pueden precargar, almacenar en caché ni controlar. Autohospedar esas mismas fuentes elimina todos estos problemas y toma unos 10 minutos.

Última revisión por Arjen Karel en febrero de 2026

Entender las Core Web Vitals

Las Core Web Vitals son tres métricas que Google usa como señales de clasificación: LCP (carga), INP (interactividad) y CLS (estabilidad visual). Autohospedar fuentes mejora principalmente el LCP y el CLS, y también puede mejorar el First Contentful Paint (FCP).

Impacto de Google Fonts en las Core Web Vitals

Google Fonts, a menudo incluido en las páginas web para mejorar la tipografía y el diseño, puede tener un impacto significativo en las Core Web Vitals, principalmente en el Largest Contentful Paint (LCP) y el Cumulative Layout Shift (CLS).

Para la mayoría de las personas con las que hablo, esta es información nueva. Se supone que la CDN de Google es la mejor del mundo. Entonces, ¿por qué Google Fonts es malo para la velocidad de la página?

1. El argumento de la "caché compartida" está muerto. Muchos desarrolladores todavía creen que, dado que Google Fonts es tan popular, es probable que los visitantes tengan la fuente almacenada en caché de otro sitio. Eso era cierto antes de 2020. Desde Chrome v86 y Safari (que ha hecho esto desde 2013), los navegadores particionan su caché HTTP por dominio de nivel superior. Esto significa que su sitio descarga Google Fonts desde cero para cada nuevo visitante, independientemente de qué otros sitios hayan visitado. El beneficio de rendimiento de una caché de CDN compartida ya no existe.

2. La hoja de estilos nunca está en la caché del navegador para los nuevos visitantes. El primer problema con Google Fonts es que depende de una hoja de estilos externa alojada por fonts.google.com o fonts.googleapis.com. Esta hoja de estilos no puede ser reutilizada por diferentes dominios (como mucha gente parece pensar). Esto significa que la hoja de estilos que bloquea el renderizado nunca se sirve desde la caché súper rápida del navegador para los visitantes primerizos y siempre ralentizará el renderizado de la página.

3. Requiere 2 conexiones a 2 servidores nuevos. El segundo problema es que para descargar el archivo CSS y los archivos de fuentes tenemos que conectarnos a 2 servidores diferentes. Cada conexión inicial a un nuevo servidor tiene una sobrecarga importante y toma algo de tiempo adicional. Tiempo que podríamos haber ahorrado, sirviendo los archivos desde nuestra conexión ya abierta a nuestro servidor. Para evitar esto, Google aconseja preconectar a sus dominios. Eso mitigará el problema un poco, pero todavía está lejos de ser perfecto.

4. Tienes control limitado sobre el atributo font-display. Si bien Google Fonts te permite establecer el atributo font-display, solo puedes definirlo globalmente. Esto significa que todos los archivos woff2 tendrán la misma configuración de font-display.

5. La ubicación final del archivo woff2 es desconocida. Esto significa que no podemos precargar nuestras fuentes más importantes. Esto significa que nuestros archivos de fuentes se ponen en cola para su descarga relativamente tarde y probablemente obtendremos un cambio de diseño visible causado por el destello de texto sin estilo (FOUT). Lea más sobre cómo garantizar que el texto permanezca visible durante la carga de fuentes web.

6. No tienes control sobre los archivos de fuentes. No puedes subagruparlos (subset) más, no puedes establecer encabezados de caché largos y no puedes servirlos desde tu propia CDN.

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Ventajas de autohospedar Google Fonts

Autohospedar Google Fonts implica servir los archivos de fuentes desde sus propios servidores en lugar de depender de servidores externos de Google. Este enfoque puede generar varios beneficios:

1. Velocidad de entrega de fuentes mejorada: autohospedar fuentes reduce la dependencia de servidores externos, lo que lleva a una entrega de fuentes más rápida y, en consecuencia, a un renderizado más rápido del contenido de texto. Esta mejora puede impactar positivamente el LCP, asegurando que el elemento de texto más grande se vuelva visible más rápido. El Web Almanac de 2025 muestra que el autohospedaje va en aumento: el 31.5% de los sitios de escritorio ahora autohospedan exclusivamente sus fuentes, frente al 28% en 2024.

2. Cambios de diseño reducidos: al autohospedar Google Fonts, puede controlar cómo se carga y muestra la fuente, minimizando las posibilidades de cambios de diseño causados por el retraso en el renderizado de las fuentes. Esto ayuda a mejorar la estabilidad visual general de su página web y afecta positivamente el CLS.

3. Control total sobre el almacenamiento en caché y la precarga: cuando se autohospeda, conoce la URL exacta de cada archivo de fuente. Eso significa que puede precargar fuentes críticas, establecer encabezados de caché agresivos (un año o más) y servir fuentes desde la misma conexión que el resto de su página.

Cumplimiento del GDPR

En enero de 2022, el Tribunal Regional de Múnich dictaminó que cargar Google Fonts desde los servidores de Google viola el GDPR porque transfiere las direcciones IP de los visitantes a Google sin consentimiento. El autohospedaje elimina este problema por completo porque no se envían datos a Google cuando se cargan las fuentes. Si su sitio tiene visitantes europeos, esta es una razón más para autohospedar.

Mejores prácticas para autohospedar Google Fonts

Para optimizar sus Google Fonts autohospedadas para obtener un mejor rendimiento en las Core Web Vitals, considere implementar las siguientes mejores prácticas:

1. Use solo formato WOFF2: WOFF2 ofrece la mejor compresión (aproximadamente un 30% más pequeño que WOFF) y tiene un soporte de navegador superior al 96%. El único navegador que no es compatible con WOFF2 es Internet Explorer, que llegó al final de su vida útil en junio de 2022. Ya no necesita un fallback a WOFF.

2. Subconjunto de fuentes (Font Subsetting): Para reducir aún más el tamaño de los archivos de fuentes, considere usar el subconjunto de fuentes, lo que implica incluir solo los caracteres necesarios para el contenido de su página web. Esto puede conducir a una carga de fuentes más rápida y a una mejora en las Core Web Vitals. Google Fonts ya crea subconjuntos por unicode-range, pero cuando se autohospeda puede ir más allá con herramientas como fonttools.

3. Atributo font-display estratégico: configure el atributo font-display estratégicamente para controlar el renderizado de texto durante la carga de la fuente. El valor "swap" acelerará el First Contentful Paint al garantizar que se muestren fuentes fallback hasta que la fuente web esté completamente cargada. El valor "optional" omitirá el intercambio de fuentes por completo, evitando cambios de diseño al nunca reemplazar la fuente fallback. Una combinación estratégica de estos dos a menudo optimizará tanto el Cumulative Layout Shift como el First Contentful Paint. Según el Web Almanac de 2025, el 50% de las páginas ahora usan font-display: swap, pero solo el 0.5% usa font-display: optional, que es la mejor opción para obtener el máximo rendimiento de CWV en fuentes no críticas.

4. Precargar fuentes: asegúrese de que las fuentes estén disponibles lo antes posible precargando las fuentes más importantes (1 o 2 como máximo) con el mecanismo de precarga de enlaces (link preload). Incluya siempre el atributo crossorigin, incluso para fuentes del mismo origen, o el navegador descargará la fuente dos veces. Solo el 12% de las páginas precarga sus fuentes, por lo que esta es una victoria fácil.

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

Cómo autohospedar una fuente de Google (de la manera correcta)

Descargar y autohospedar una Google Font toma alrededor de 10 minutos. Tenga en cuenta que siempre debe revisar la licencia de la fuente antes de usarla. La mayoría de las Google Fonts están disponibles bajo la SIL Open Font License, que permite su uso gratuito, incluido el uso comercial.

El método más rápido es usar google-webfonts-helper, que le permite descargar cualquier Google Font como archivos WOFF2 con CSS listo para usar. Pero si desea hacerlo manualmente para comprender exactamente qué está sucediendo, siga estos pasos:

1. Vaya al sitio web de Google Fonts en fonts.google.com.

2. Seleccione la fuente que desea usar y elija los pesos de fuente que desea incluir.

3. En la página de la fuente, en la barra superior, haga clic en el botón 'selected families'. Allí encontrará el enlace a la hoja de estilos alojada por Google.

   

4. Copie la URL de esta hoja de estilos y ábrala en su navegador. Ahora verá todas las declaraciones font-face disponibles para la fuente.

   

5. Es posible que observe que hay más de 1 archivo woff2 a pesar de que solo usamos un archivo de fuente. Eso se debe a que hay un archivo de fuente diferente para diferentes rangos unicode. Para saber qué fuentes debemos descargar, debe agregar temporalmente la hoja de estilos alojada en Google a su sitio web. Use el atajo Ctrl-Shift-I para abrir sus Chrome DevTools. Navegue a la pestaña network (red) y haga clic en Font. Ahora actualice la página (Ctrl-R) para ver qué fuente se activa para la descarga.

6. Haga coincidir este nombre de archivo de fuente con el archivo woff2 correspondiente en la hoja de estilos. ¡Ahora sabe qué archivo de fuente se usa para su sitio web!

7. El siguiente paso es copiar la URL completa de la fuente y abrirla en su navegador. Esto activará la descarga de este archivo de fuente. Copie este archivo a su sitio web.

8. Copie el CSS para la webfont utilizada en el paso 7 y péguelo en su hoja de estilos. No olvide cambiar la URL de la CDN de Google a su propio servidor (por ejemplo, '/fonts/inter-400.woff2').

9. Precargue la fuente (si es una fuente visualmente importante).

Ahora ha descargado y autohospedado con éxito la Google Font de su elección.

Un ejemplo de la vida real

Aquí hay un ejemplo completo usando la fuente Inter con todas las mejores prácticas aplicadas: precarga, solo WOFF2, un valor de font-display estratégico y un fallback de fuente del sistema.

<head>
  <title>Self-Hosted Google Fonts</title>
  <!-- preload the font (crossorigin is required, even for same-origin fonts) -->
  <link rel="preload" as="font" href="/fonts/inter-400.woff2" type="font/woff2" crossorigin>
  <style>
    /* Self-hosted Inter font with WOFF2 format */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      src: url('/fonts/inter-400.woff2') format('woff2');
      font-display: optional;
    }

    /* Fallback to system-ui font */
    body {
      font-family: 'Inter', system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This page uses Inter with a system-ui fallback.</p>
</body>

Monitorice el impacto

Después de cambiar a fuentes autohospedadas, verifique la mejora con Real User Monitoring. En nuestros datos de CoreDash, los sitios que autohospedan sus fuentes con la precarga adecuada ven una mejora en el LCP medio de 180 ms en comparación con la carga desde la CDN de Google Fonts. Rastree su LCP, CLS y FCP a lo largo del tiempo para asegurarse de que el cambio esté funcionando.