Analizador de Fuentes Web

Cuando incluye Google Fonts desde el CDN de Google (fonts.googleapis.com), el navegador del usuario envía una solicitud a los servidores de Google, revelando su dirección IP. En enero de 2022, el Tribunal Regional de Múnich (LG München I) dictaminó que el uso de Google Fonts sin consentimiento explícito infringía el GDPR (DSGVO), concediendo 100 € de indemnización al demandante. La sentencia estableció que las direcciones IP son datos personales según el GDPR y que transferirlas a una empresa estadounidense (Google) sin consentimiento viola el artículo 44 del GDPR. Para solucionarlo: aloje sus fuentes en su propio servidor o utilice una alternativa compatible con el GDPR como Bunny Fonts.

Utilice google-webfonts-helper (disponible como herramienta web) para descargar los archivos de fuentes (se recomienda el formato WOFF2) y el CSS. Suba los archivos de fuentes a su servidor, añada las declaraciones CSS @font-face y elimine las etiquetas <link> de Google Fonts. Añada siempre font-display: swap para evitar el Flash of Invisible Text. Alternativamente, utilice Bunny Fonts (fonts.bunny.net), que proporciona una API de sustitución directa para Google Fonts: las mismas familias de fuentes, el mismo formato de URL de la API, pero con infraestructura alojada en la UE y sin registro de IPs.

font-display: swap indica al navegador que renderice inmediatamente el texto utilizando una fuente del sistema de reserva y luego cambie a la fuente personalizada una vez que se cargue. Sin ello, el navegador puede ocultar el texto por completo mientras se carga la fuente (Flash of Invisible Text / FOIT), lo que provoca que la puntuación de Largest Contentful Paint (LCP) se retrase y que sus Core Web Vitals se vean perjudicados. Añada font-display: swap a todas las declaraciones @font-face y a las URL de Google Fonts añadiendo &display=swap a la URL.

Las precargas de fuentes (<link rel="preload" as="font" href="..." crossorigin>) indican al navegador que obtenga los archivos de fuentes críticos antes de analizar el resto del HTML. Esto reduce la posibilidad de cambios de diseño (CLS) y texto invisible. Utilice precargas solo para las fuentes situadas por encima del pliegue: precargar todas las fuentes aumenta el ancho de banda. Combine las precargas con <link rel="preconnect"> al dominio CDN de fuentes para establecer la conexión anticipadamente. Para las fuentes autoalojadas, precargar el archivo WOFF2 es lo más eficaz.

Adobe Fonts envía datos de usuario a los servidores de Adobe cuando se cargan las fuentes. Se trata de un riesgo medio, no alto, porque Adobe cuenta con una certificación del Marco de Privacidad de Datos UE-EE. UU. y ofrece un Acuerdo de Tratamiento de Datos (DPA). Sin embargo, deberá incluir Adobe Fonts en su política de privacidad y posiblemente añadirla a su consentimiento de cookies. Adobe ofrece el servicio de fuentes desde la región de la UE, pero el estatus legal de las transferencias de datos a EE. UU. bajo la legislación post-Schrems II sigue siendo objeto de debate. Para un cumplimiento máximo, el autoalojamiento sigue siendo la opción más segura.