Cómo alojar fuentes localmente en lugar de usar Google Fonts

¿Por qué alojar Google Fonts por tu cuenta?

Google Fonts facilitó la buena tipografía. Añades una hoja de estilos, eliges algunos pesos y publicas la página. Durante años, ese fue el valor predeterminado sensato para equipos pequeños.

La contrapartida es que el navegador de cada visitante contacta con un servicio de terceros para obtener el CSS de la fuente y los archivos de fuente. Eso tiene dos consecuencias.

Primero, añade una dependencia externa al renderizado. Si el CSS de la fuente es lento, está bloqueado o no está disponible en la región o red del usuario, tu página espera o recurre a una fuente alternativa.

Segundo, plantea una cuestión de privacidad. Una solicitud de fuente puede revelar a un tercero la dirección IP del usuario, el agente de usuario, el contexto de la política de referrer y datos de tiempo. Google Fonts afirma que no establece cookies a través de la Fonts API, pero “sin cookies” no es lo mismo que “sin datos personales”. Según el RGPD, una dirección IP puede seguir siendo un dato personal según el contexto.

Alojar las fuentes por tu cuenta no es automáticamente obligatorio para todos los sitios web, y esto no es asesoramiento legal. Pero para sitios europeos, sitios del sector público, salud, educación, finanzas o cualquier equipo que intente reducir solicitudes innecesarias a terceros, el alojamiento local suele ser la opción más limpia.

También suele mejorar el rendimiento cuando se hace bien. La clave es “cuando se hace bien”. Copiar seis archivos de fuente en /assets/fonts/ y cargarlos todos en cada página puede ser peor que usar el servicio alojado. Si quieres el contexto de rendimiento más amplio, nuestro artículo anterior sobre por qué las fuentes web siguen siendo la mejora de rendimiento más sencilla en la mayoría de los sitios cubre los patrones de desperdicio más comunes.

Qué cambia cuando las alojas por tu cuenta

Cuando usas Google Fonts de la forma habitual, tu página hace esto:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

El navegador primero solicita CSS a fonts.googleapis.com y luego descarga archivos de fuente desde fonts.gstatic.com.

Cuando las alojas por tu cuenta, tu página debería solicitar tanto el CSS como los archivos de fuente desde tu propio dominio:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Eso elimina la solicitud de fuente a terceros. También te hace responsable de elegir formatos de archivo, encabezados de caché, fuentes alternativas y actualizaciones.

Conviene tomarse esa responsabilidad en serio. Las fuentes forman parte de la ruta crítica de renderizado. Una configuración deficiente de fuentes puede causar texto invisible, cambios de diseño y un primer renderizado lento.

Paso 1: Audita lo que realmente usas

Antes de descargar nada, enumera las familias tipográficas, pesos, estilos y conjuntos de caracteres que tu sitio necesita de verdad.

Un sitio de marketing típico podría necesitar:

• Regular 400 para texto de cuerpo
• Semibold 600 o bold 700 para encabezados y botones
• Italic 400 solo si el diseño usa realmente cursivas
• Conjunto de caracteres Latin únicamente, salvo que el sitio admita más idiomas

Desconfía de los valores predeterminados antiguos de sistemas de diseño. Muchos sitios cargan 300, 400, 500, 600, 700, cursivas y varios scripts porque alguien los seleccionó una vez en un selector de fuentes.

En browser DevTools, abre el panel Network, filtra por “font”, recarga la página y comprueba qué archivos se solicitan. Después inspecciona tu CSS para ver el uso de font-weight. Si tu CSS nunca usa 300, no alojes 300.

Si más adelante revisas el impacto, Lighthouse puede ayudar, pero no trates su puntuación como toda la historia. Úsalo como herramienta de diagnóstico, no como juez. Tenemos una guía separada sobre cómo leer un informe de Lighthouse sin entrar en pánico que resulta útil al priorizar correcciones de fuentes.

Paso 2: Descarga los archivos de fuente adecuados

Google Fonts ofrece fuentes de código abierto. Puedes descargarlas desde el sitio web de Google Fonts o desde el repositorio del proyecto de la fuente correspondiente. Comprueba la licencia, aunque la mayoría de las fuentes de Google Fonts se distribuyen bajo licencias abiertas como SIL Open Font License o Apache License.

Para la web, prefiere WOFF2. Está ampliamente soportado por navegadores modernos y suele ser mucho más pequeño que TTF u OTF. En 2026, servir TTF directamente a los navegadores rara vez está justificado para sitios web públicos.

Una estructura de directorios sensata se ve así:

/public
  /fonts
    inter-latin-400.woff2
    inter-latin-600.woff2
    inter-latin-700.woff2

Usa nombres de archivo descriptivos. Seis meses después, font.woff2 será molesto. inter-latin-600.woff2 es aburrido y útil.

Si tu sitio usa un sistema de build, conserva las fuentes de origen en un lugar claro y deja que el pipeline de build copie los archivos optimizados en el directorio público de assets.

Paso 3: Crea subconjuntos de fuentes cuando sea apropiado

Crear subconjuntos significa eliminar caracteres que no necesitas. Una fuente completa puede incluir Latin, Cyrillic, Greek, Vietnamese, símbolos y muchas funciones OpenType. Si tu landing page solo en inglés necesita únicamente caracteres Latin, un subconjunto puede ser drásticamente más pequeño.

Hay dos enfoques comunes:

1. Usar un subconjunto preconstruido del proveedor o repositorio de la fuente.
2. Generar tu propio subconjunto con una herramienta de fuentes como pyftsubset de fonttools.

Para muchos equipos, los subconjuntos Latin preconstruidos son suficientes. La creación de subconjuntos personalizados es útil cuando tienes páginas muy acotadas, como una página de campaña única con texto limitado, o una interfaz de producto con cobertura de caracteres predecible.

Ten cuidado con los sitios multilingües. Los glifos faltantes provocan mezcla de fuentes alternativas, lo que puede verse roto y perjudicar la legibilidad. Si admites varios idiomas, asigna subconjuntos de fuentes a rutas de idioma en lugar de forzar un subconjunto diminuto en todas partes.

Paso 4: Escribe tus reglas @font-face

Una configuración local mínima se ve así:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

Algunos detalles importan aquí.

Usa font-display: swap para la mayoría de los sitios de contenido. Le indica al navegador que muestre rápidamente el texto con una fuente alternativa y luego cambie a la fuente web cuando llegue. Eso evita la peor versión de FOIT: flash of invisible text.

Define una pila de fuentes alternativas explícita. Si la fuente personalizada falla, los usuarios deberían seguir recibiendo texto legible. Las alternativas no son una ocurrencia tardía; forman parte del diseño. Si necesitas revisar tamaños, longitud de línea y elecciones de texto de cuerpo, empieza con una guía práctica para tipografía legible en la web moderna.

Empareja los pesos correctamente. Si tu CSS solicita font-weight: 500 pero solo defines 400 y 700, el navegador puede sintetizar un peso intermedio. Eso no siempre es terrible, pero puede verse inconsistente.

Paso 5: Elimina las llamadas externas a Google Fonts

Después de añadir el CSS de fuentes locales, elimina de tus plantillas las llamadas remotas antiguas.

Busca:

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

Comprueba también:

• Configuraciones de tema en plataformas CMS
• Paneles de tipografía de page builders
• Widgets de terceros
• Tag managers
• Importaciones CSS antiguas como @import url('https://fonts.googleapis.com/...')

Esto último es común. CSS @import para fuentes suele ser peor para el rendimiento porque retrasa el descubrimiento. Si las alojas por tu cuenta, define las fuentes directamente en tu CSS principal o en un archivo CSS de fuentes cargado temprano.

El trabajo de privacidad suele fallar porque los equipos corrigen la plantilla evidente pero pasan por alto scripts, widgets e incrustaciones heredadas. Ese mismo patrón aparece en el trabajo de consentimiento; nuestra guía sobre qué cambió para las cookies en 2026 es un complemento útil si estás reduciendo de forma más amplia la superficie de terceros.

Paso 6: Configura encabezados de caché

Los archivos de fuente son assets estáticos. Deben almacenarse en caché de forma agresiva si sus nombres de archivo están versionados o incluyen hash de contenido.

Un buen encabezado de producción es:

Cache-Control: public, max-age=31536000, immutable

Usa caché inmutable de larga duración solo si la URL cambia cuando cambia el archivo. Por ejemplo:

inter-latin-400.a8f3c2.woff2

o una ruta versionada:

/fonts/v2/inter-latin-400.woff2

Si sobrescribes /fonts/inter-latin-400.woff2 sin cambiar la URL, algunos usuarios pueden conservar el archivo antiguo durante mucho tiempo. Eso está bien hasta que deja de estarlo. El versionado evita el problema.

Sirve también las fuentes con el tipo MIME correcto:

Content-Type: font/woff2

La mayoría de las plataformas de hosting modernas gestionan esto automáticamente, pero merece la pena verificarlo.

Paso 7: Considera precargar solo la fuente crítica

La precarga puede ayudar al navegador a descubrir antes una fuente importante:

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

Úsala con moderación. Precarga la fuente principal del texto above-the-fold, no todos los pesos de fuente. Precargar en exceso compite con CSS, imágenes y JavaScript.

Incluso para fuentes del mismo origen, incluye crossorigin en las precargas de fuentes. La obtención de fuentes usa modo CORS, y omitirlo puede causar descargas duplicadas en algunas configuraciones.

Si no estás seguro, prueba. No copies preloads por inercia solo porque una checklist lo diga.

Paso 8: Prueba privacidad y rendimiento

Las pruebas son sencillas.

Abre DevTools, recarga la página con la caché desactivada y filtra el panel Network por:

• fonts.googleapis.com
• fonts.gstatic.com
• .woff2
• font

Deberías ver archivos de fuente servidos desde tu propio dominio y ninguna solicitud a Google Fonts.

Después prueba con caché fría y caché caliente. En la primera visita, las fuentes deberían descargarse una vez. En visitas posteriores, deberían venir de la caché de memoria o de disco según el navegador.

Comprueba si hay cambios de diseño cuando la fuente se intercambia. Si los encabezados saltan, las métricas de tu fuente alternativa difieren demasiado de las de la fuente web. Puedes reducir el desplazamiento visible eligiendo una alternativa más cercana o usando anulaciones modernas de métricas de fuente en CSS, como size-adjust, ascent-override, descent-override y line-gap-override. Son más avanzadas, pero útiles para interfaces pulidas.

Por último, prueba páginas en navegación privada o con bloqueadores de contenido activados. Una ventaja de alojarlas por tu cuenta es que es menos probable que las herramientas de privacidad bloqueen accidentalmente tu tipografía.

Errores comunes que conviene evitar

Alojar demasiados pesos

Este es el fallo más común. Dos pesos suelen ser suficientes. Tres normalmente bastan. Cinco es una señal sospechosa en un sistema de diseño salvo que tengas una razón sólida.

Olvidar las cursivas

Si tu contenido usa énfasis real, carga un archivo italic real. Las cursivas sintéticas pueden verse mal, especialmente en contenido editorial largo.

Mantener el enlace antiguo al CSS de Google

Esto anula el propósito. Después de la migración, ninguna solicitud de fuente debería ir a Google salvo que otro componente la esté inyectando.

Servir fuentes sin caché a largo plazo

Alojar por tu cuenta te da control. Úsalo. Las fuentes son candidatas ideales para vidas de caché largas.

Ignorar el trabajo legal y de documentación

Si tu política de privacidad mencionaba antes Google Fonts o la carga de fuentes de terceros, actualízala después de la migración. Si mantienes un inventario de tratamiento de datos, actualízalo también. El cambio técnico y el registro de cumplimiento deberían coincidir.

<!-- tool-cta:start -->

💡 Prueba esto: Convierte los archivos TTF que descargaste de Google Fonts en WOFF2 autohospedable más CSS con Webfont Generator.

<!-- tool-cta:end -->

Una checklist sencilla de migración

1. Enumera las familias tipográficas, pesos, estilos y scripts que realmente usas.
2. Descarga archivos WOFF2 y confirma la licencia.
3. Crea subconjuntos de fuentes si el sitio tiene necesidades lingüísticas limitadas.
4. Añade reglas locales @font-face con font-display: swap.
5. Elimina todas las referencias link, preconnect y @import de Google Fonts.
6. Sirve fuentes desde tu propio dominio con encabezados de caché de larga duración.
7. Precarga solo la fuente above-the-fold más importante, si las pruebas lo respaldan.
8. Verifica en DevTools que no queden solicitudes a Google Fonts.
9. Actualiza la documentación de privacidad si es necesario.

Alojar fuentes por tu cuenta no es un trabajo glamuroso. Es el tipo de pequeña limpieza de infraestructura que reduce el riesgo de dependencia, mejora la postura de privacidad y te da un renderizado más predecible. Normalmente, eso merece la hora o dos que lleva.