¿Qué son las fuentes web (web fonts)?

Fuentes web: definición e importancia

Antes, los sitios web solo podían usar tipografías presentes en todos los ordenadores, como Arial o Times. Con las fuentes web, el navegador descarga el archivo de la fuente desde el servidor mediante la regla CSS @font-face. Así, la tipografía corporativa de una empresa se ve igual en cualquier dispositivo, ya sea un PC con Windows, un iPhone o una tableta Android. Lo habitual es el formato comprimido WOFF2, que admiten todos los navegadores actuales.

Los archivos de fuentes son parte de la marca, pero también parte del tiempo de carga. Cada familia tipográfica adicional y cada variante más, como regular, negrita o cursiva, cuesta volumen de datos y retrasa la visualización. Las fuentes web afectan, por tanto, al diseño, al rendimiento y a la protección de datos a la vez, y una selección ligera compensa por partida doble.

Protección de datos: alojar Google Fonts en local

Si Google Fonts se cargan directamente desde los servidores de Google, la dirección IP del visitante se transmite a Google. Por ello, el Tribunal Regional de Múnich I (Landgericht München I) concedió en enero de 2022 a un visitante 100 euros de indemnización (Az. 3 O 17493/20), porque no había dado su consentimiento. Desde entonces, la integración local se considera el camino más seguro.

Con ella, los archivos de la fuente están en el propio servidor, no fluyen datos a terceros y la tipografía suele cargar más rápido, porque no hace falta una conexión adicional. La licencia de muchas Google Fonts lo permite, por ejemplo la SIL Open Font License. En las fuentes de pago, la licencia debe cubrir el uso web y el autoalojamiento. Las cuestiones de protección de datos en cada caso las aclara su asesoría de protección de datos.

Ejemplo práctico: clínica dental

Una clínica dental encarga su sitio web a una agencia. El tema carga dos familias tipográficas con seis variantes directamente desde Google. Tras la revisión, solo se carga una fuente con dos variantes, en WOFF2, desde el propio servidor y reducida a los caracteres necesarios.

La página carga más rápido, no se envían datos a Google y la política de privacidad se simplifica, porque puede suprimirse la referencia al servicio de fuentes. La apariencia del sitio web no cambia; los pacientes solo notan la diferencia en el menor tiempo de carga.

Qué importa en la imple­menta­ción

Errores típicos son el texto invisible durante la carga, demasiadas variantes y la integración a través de servidores ajenos sin base jurídica. Nano Concepts integra las fuentes en local y con buen rendimiento, las adapta al diseño corporativo y comprueba que la licencia, el comportamiento de carga y la política de privacidad encajen entre sí. Técnicamente, lo que importa es lo siguiente:

• WOFF2 como formato, solo las variantes y caracteres necesarios (subsetting)
• font-display: swap, para que el texto aparezca de inmediato con una fuente sustituta
• Precargar con preload la fuente más importante
• Fuente sustituta con medidas similares, para que la página no salte al cambiar
• Valorar las variable fonts: varias variantes en un solo archivo
• Aclarar de antemano la licencia y el autoalojamiento