¿Qué son las webfonts y por qué usarlas?
Una webfont es un archivo de fuente que tu sitio web envía al navegador del visitante. Así, tu texto se ve como lo diseñaste, aunque el visitante nunca haya instalado esa fuente.
Cómo funcionan las webfonts
Cuando alguien abre tu página, el navegador lee tu CSS, detecta qué fuente necesita y descarga el archivo desde tu servidor. Después dibuja tu texto con esa fuente. Todo esto ocurre automáticamente, y el visitante no tiene que instalar nada.
¿Webfonts o fuentes del sistema?
Las fuentes del sistema ya están en el dispositivo del visitante, como Arial, Georgia o San Francisco. No necesitan descarga, así que son la opción más rápida. Su desventaja es que el aspecto cambia de un dispositivo a otro, y pocas coincidirán con tu marca.
- Elige una webfont cuando tu marca, tus títulos o tu diseño dependan de una tipografía concreta.
- Elige fuentes del sistema cuando la velocidad sea lo más importante, como en paneles de control o herramientas internas.
- Combínalas usando una webfont para los títulos y una fuente del sistema para el texto principal.
¿Cuánto cuestan las webfonts en velocidad?
Cada archivo de fuente es una descarga más, y el texto puede aparecer tarde o moverse mientras llega. Una webfont bien preparada mantiene ese costo bajo. Usa WOFF2, elimina los caracteres que no necesites y carga solo los grosores que utilices. Nuestra guía sobre cómo hacer que las webfonts carguen más rápido explica cada paso.
¿Alojamiento propio o un servicio de fuentes?
Servicios como Google Fonts y Adobe Fonts alojan los archivos por ti. Alojarlos tú mismo significa guardarlos en tu propio servidor. Así controlas la caché y la velocidad, y los navegadores de los visitantes no se conectan a un tercero. Esto puede importar por privacidad: en 2022, un tribunal alemán dictaminó en contra de un sitio que cargaba Google Fonts desde los servidores de Google sin consentimiento.
Antes de alojar las fuentes tú mismo, lee la licencia de la fuente. Nuestra guía de licencias de webfonts explica qué revisar.
Primeros pasos
Toma una fuente que tengas licencia para usar y pásala por el Generador de Webfonts. Obtendrás archivos listos para la web y CSS, y nuestra guía muestra cómo añadirlos a tu sitio.
