≡En resumen
- La Google Fonts API sirve las fuentes con una etiqueta link: no requiere clave ni registro.
- La versión actual es la CSS API v2 (css2), que admite ejes y rangos de fuentes variables.
- Añade display=swap para que el texto se vea con una fuente de sistema mientras carga la definitiva.
- Desde 2020 los navegadores ya no comparten la caché de fuentes entre webs, así que usar Google no aporta ventaja de caché.
- Un tribunal de Múnich condenó en 2022 a una web a pagar 100 euros por cargar Google Fonts sin consentimiento; alojar las fuentes en tu servidor evita el problema.
01 ¿Qué es la Google Fonts API?
En realidad Google ofrece dos interfaces distintas. La CSS API es la que usan casi todas las webs: no requiere clave y devuelve CSS listo para el navegador. La Developer API (googleapis.com/webfonts/v1/webfonts) sí necesita una clave de API y devuelve en JSON el listado de familias con sus metadatos; la usan plugins, editores y herramientas que muestran el catálogo completo.
| CSS API (css2) | Developer API (webfonts v1) | |
|---|---|---|
| Para qué sirve | Cargar fuentes en una web | Consultar el catálogo de familias |
| Respuesta | Hoja de estilos CSS | JSON con familias, estilos y URLs de archivos |
| Clave de API | No | Sí |
| Quién la usa | Cualquier web | Plugins, temas y aplicaciones de diseño |
02 Cómo funciona la Google Fonts API
-
1
La página enlaza la hoja de estilos
El HTML incluye una etiqueta link que apunta a fonts.googleapis.com/css2 con las familias y estilos.
-
2
Google genera un CSS a medida
La API devuelve una hoja de estilos adaptada al navegador que la pide, con el formato de archivo que ese navegador soporta.
-
3
El CSS declara las fuentes por subconjuntos
Cada regla @font-face apunta a un archivo WOFF2 de un rango de caracteres (latino, latino extendido, cirílico…) con unicode-range.
-
4
El navegador descarga solo lo que usa
Solo pide a fonts.gstatic.com los subconjuntos que contienen caracteres de la página.
-
5
El texto se pinta con la fuente
Mientras llega el archivo, el navegador espera o muestra una fuente de respaldo según el valor de display.
03 Sintaxis de la CSS API v2 (css2)
La CSS API v2 sustituyó a la antigua /css?family= para dar soporte completo a las fuentes variables. Cada familia se pide con family=Nombre:ejes@valores, con los ejes en orden alfabético y los valores en orden numérico, y varias familias se encadenan repitiendo el parámetro family.
| Qué quieres | Parámetro | Ejemplo |
|---|---|---|
| Estilo normal por defecto | family | css2?family=Crimson+Pro |
| Un peso concreto | wght@ | css2?family=Crimson+Pro:wght@700 |
| Cursiva y normal en un peso | ital,wght@ | css2?family=Crimson+Pro:ital,wght@0,700;1,700 |
| Rango de una fuente variable | [email protected] | css2?family=Crimson+Pro:[email protected] |
| Comportamiento de carga | display | css2?family=Crimson+Pro&display=swap |
| Solo ciertos caracteres | text | css2?family=Comfortaa&text=Hola |
En el head de la página, primero las conexiones anticipadas y después la hoja de estilos:
<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:[email protected]&family=Merriweather:wght@700&display=swap" rel="stylesheet">
Y en tu CSS: body { font-family: 'Inter', sans-serif; }.
04 display=swap y el resto de valores de font-display
El parámetro display de la API escribe la propiedad font-display en cada regla @font-face. Decide qué ve el usuario mientras la fuente se descarga y afecta a métricas de Core Web Vitals como el LCP (cuándo aparece el contenido principal) y el CLS (saltos de maquetación cuando cambia la fuente).
| Valor | Qué pasa mientras carga | Cuándo usarlo |
|---|---|---|
| auto | Decide el navegador (normalmente como block) | Casi nunca; mejor ser explícito |
| block | Texto invisible un tiempo corto y luego la fuente | Iconos en fuente, donde la de respaldo no tiene sentido |
| swap | Texto visible al instante con la fuente de respaldo y cambio al llegar la definitiva | La opción más usada para texto |
| fallback | Espera muy corta; si la fuente tarda, se queda la de respaldo en esa visita | Equilibrio entre estabilidad y marca |
| optional | Solo usa la fuente si llega casi de inmediato | Máxima estabilidad visual y rendimiento |
05 Rendimiento: cómo cargar Google Fonts sin frenar tu web
Durante años se dijo que usar la API era más rápido porque la fuente ya estaría en la caché del navegador por otras webs. Ya no es así: Chrome particiona la caché del navegador por sitio desde la versión 86 (2020), y el resto de navegadores principales hacen algo equivalente, así que cada web descarga sus fuentes aunque otra ya las haya usado. Hoy la decisión se basa en otros factores.
- ✓Pide solo las familias y pesos que usas; cada variante es otro archivo.
- ✓Si usas tres o más pesos de una familia, pide el rango variable ([email protected]).
- ✓Añade preconnect a fonts.googleapis.com y a fonts.gstatic.com (este último con crossorigin).
- ✓Usa display=swap u optional, nunca dejes el valor por defecto.
- ✓Evita @import dentro de otro CSS: retrasa el descubrimiento de la fuente.
- ✓Mide antes y después con PageSpeed Insights o Lighthouse.
- ✓Si alojas las fuentes, sírvelas en WOFF2, con subconjunto latino y caché larga.
Web.dev reconoce que la diferencia de rendimiento entre usar la API y alojar las fuentes no siempre es clara: depende de tu CDN y de si aplicas subconjuntos y WOFF2 como hace Google. Si tu web está en WordPress, revisa también qué plugins y temas añaden sus propias fuentes, algo que tratamos en la guía para optimizar un WordPress lento. Y si quieres un diagnóstico completo, nuestro servicio de optimización de la velocidad web incluye la estrategia de carga de fuentes.
06 Google Fonts API y RGPD: la sentencia de Múnich
El 20 de enero de 2022 el Landgericht München I (tribunal regional de Múnich, asunto 3 O 17493/20) condenó al titular de una web a pagar 100 euros a un visitante por haber incrustado Google Fonts desde los servidores de Google sin su consentimiento. El tribunal consideró que la IP dinámica es un dato personal, que su envío a Google no tenía base legal según el artículo 6 del RGPD y concedió la indemnización del artículo 82, además de ordenar que cesara esa transmisión.
100 €
Indemnización al visitante por daño inmaterial
Fuente: LG München I, 3 O 17493/20
20-01-2022
Fecha de la sentencia
Fuente: LG München I
Es una sentencia de un tribunal regional alemán y no vincula a los tribunales españoles, pero aplica el mismo RGPD que rige en España. Tras ella hubo en Alemania oleadas de reclamaciones masivas a webs que usaban la API. La conclusión práctica para cualquier web dirigida a la UE: o pides consentimiento antes de cargar la API, o alojas las fuentes tú mismo, que es más sencillo y además no depende del banner de cookies. En un proyecto de diseño web a medida lo lógico es decidirlo desde el principio y servir las fuentes desde el propio dominio.
07 Cómo alojar Google Fonts en tu propio servidor
-
1
Descarga los archivos
Desde el repositorio oficial google/fonts de GitHub, el botón de descarga de fonts.google.com o paquetes como Fontsource.
-
2
Convierte y recorta a WOFF2
Usa WOFF2 y, si puedes, un subconjunto con solo los caracteres latinos que necesita tu web.
-
3
Declara @font-face en tu CSS
Una regla por archivo con font-family, src en formato woff2, font-weight, font-style y font-display: swap.
-
4
Sirve con caché larga
Configura el servidor o CDN para cachear los archivos de fuente durante meses.
-
5
Precarga solo la fuente crítica
Un preload para la fuente del texto principal como mucho; precargar todas compite con otros recursos.
-
6
Elimina las llamadas a Google
Quita la etiqueta link a fonts.googleapis.com y revisa que temas, plugins y constructores visuales no la vuelvan a añadir.
-
7
Comprueba en DevTools
En la pestaña Red, filtra por «fonts.g»: no debería aparecer ninguna petición a dominios de Google.
Preguntas frecuentes sobre Google Fonts API
Es el servicio de Google que entrega las fuentes de Google Fonts a una web mediante una hoja de estilos CSS alojada en fonts.googleapis.com.
Sí. La CSS API es gratuita y no necesita clave; solo la Developer API, que devuelve el catálogo en JSON, requiere una clave de API.
Hace que el texto se muestre al instante con una fuente de respaldo y se cambie a la definitiva cuando se descarga, evitando el texto invisible durante la carga.
css2 es la versión actual de la API y admite ejes y rangos de fuentes variables con la sintaxis [email protected]; la antigua /css sigue funcionando pero con menos opciones.
No es ilegal usar las fuentes. Lo que un tribunal de Múnich consideró contrario al RGPD en 2022 fue cargarlas desde los servidores de Google sin consentimiento, porque se transmite la IP del visitante.
Depende de tu infraestructura, pero ya no hay ventaja de caché compartida entre webs. Alojadas en tu dominio con WOFF2 y caché larga suelen rendir igual o mejor y evitan conexiones a terceros.
Abre las herramientas de desarrollador del navegador, ve a la pestaña Red, recarga la página y filtra por fonts.googleapis.com o fonts.gstatic.com.
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 ↗