Si alguna vez has diseñado o programado una web, seguro que conoces esa sensación.
Todo se ve perfecto en tu pantalla.
Perfecto en el navegador.
Perfecto en Android.
Y, de pronto, pruebas la web en un iPhone y la tipografía ha decidido desaparecer sin avisar.
El culpable parece evidente: WOFF2.
Pero aquí viene la sorpresa.
Normalmente, WOFF2 no es el problema.
Safari lleva años soportando este formato y, de hecho, WOFF2 es uno de los formatos recomendados para servir fuentes en la web por su buena compresión y compatibilidad con los navegadores modernos.
Entonces, ¿por qué una tipografía puede verse perfecta en un dispositivo y fallar en otro?
Ahí empieza el verdadero misterio.
¿Por qué una tipografía puede fallar en iPhone?
El formato WOFF2 está ampliamente soportado. Sin embargo, eso no significa que cualquier archivo de fuente vaya a funcionar perfectamente en cualquier situación.
Una fuente puede dejar de cargarse por diferentes motivos.
Por ejemplo, puede existir un problema en la declaración @font-face, una ruta incorrecta hacia el archivo o una variante que no se está sirviendo correctamente.
También pueden aparecer problemas con fuentes variables, pesos concretos o determinadas características tipográficas.
Además, Safari y WebKit siguen incorporando correcciones relacionadas con la gestión de fuentes web y @font-face.
Por eso, cuando una fuente desaparece en un iPhone, no deberías empezar culpando al WOFF2.
Primero hay que investigar qué está ocurriendo realmente.
El problema no siempre está en la fuente
Imagina esta situación.
Has creado una web.
La has probado en Chrome.
Todo funciona.
Después la abres en tu iPhone y aparece la fuente del sistema.
La primera tentación es pensar:
«Safari no soporta esta fuente».
Sin embargo, puede que Safari ni siquiera haya podido descargar el archivo.
Una URL incorrecta, un servidor mal configurado o una regla de seguridad pueden provocar que el navegador utilice la fuente alternativa.
Por eso, antes de cambiar de formato, hay que comprobar si el archivo está llegando correctamente al navegador.
El papel del @font-face
Aquí aparece uno de los puntos más importantes.
La regla @font-face indica al navegador dónde está la fuente, qué familia utiliza y qué peso o estilo representa.
Por ejemplo:
@font-face {
font-family: "MiFuente";
src: url("mi-fuente.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
Parece sencillo.
Y lo es.
Pero un pequeño error puede provocar que el navegador no encuentre el archivo o no lo utilice como esperas.
Además, si tienes varias versiones de una fuente, debes declarar correctamente cada peso y cada estilo.
Si no lo haces, el navegador puede terminar utilizando una variante diferente.
1. Comprueba que el archivo WOFF2 funciona
Antes de buscar soluciones complicadas, comprueba lo más básico.
¿El archivo existe?
¿La URL es correcta?
¿Se puede acceder a él desde el navegador?
¿El archivo se descarga correctamente?
Si alguna de estas respuestas es negativa, probablemente ya has encontrado el problema.
No necesitas cambiar de formato todavía.
2. Revisa todos los pesos de la tipografía
Este es un fallo bastante habitual.
Tienes:
- Regular.
- Medium.
- Bold.
- Italic.
Sin embargo, solo has cargado correctamente uno o dos archivos.
En escritorio puede que no lo notes inmediatamente. El navegador puede utilizar una variante disponible o incluso sintetizar determinados estilos.
En cambio, en otro dispositivo el resultado puede ser diferente.
Por eso, revisa que cada peso y estilo utilizado en la web tenga su correspondiente archivo y declaración.
3. Comprueba el @font-face
La declaración importa.
Mucho.
El nombre de la familia, el peso, el estilo, la URL y el formato tienen que coincidir con los archivos que estás utilizando.
Además, si estás proporcionando diferentes formatos, WOFF2 debería ser normalmente la primera opción para navegadores modernos. Los navegadores pueden utilizar una alternativa cuando no pueden usar el formato anterior.
Por ejemplo:
@font-face {
font-family: "MiFuente";
src:
url("mi-fuente.woff2") format("woff2"),
url("mi-fuente.woff") format("woff");
font-weight: 400;
font-style: normal;
}
Así, WOFF2 sigue siendo la opción preferente y WOFF funciona como alternativa cuando sea necesario.
4. Revisa el servidor
Aquí aparece otro sospechoso habitual.
La fuente puede estar perfectamente generada y, aun así, el servidor puede estar entregándola incorrectamente.
También pueden aparecer problemas relacionados con las cabeceras HTTP, CORS o la configuración del servidor.
Por eso, si la fuente funciona en un navegador y desaparece en otro, merece la pena abrir las herramientas de desarrollo y comprobar si el archivo está generando algún error.
No adivines. Mira qué está fallando.
5. Cuidado con las fuentes variables
Las fuentes variables permiten incluir diferentes pesos y características dentro de un mismo archivo.
Es una solución fantástica para una web moderna.
Sin embargo, también añade cierta complejidad.
Safari ha incorporado y corregido diferentes aspectos relacionados con las fuentes variables y @font-face a lo largo de sus versiones.
Por eso, si estás utilizando una fuente variable y aparece un comportamiento extraño en un dispositivo concreto, merece la pena comprobar la versión de Safari y las características concretas que estás utilizando.
¿Entonces necesito WOFF, WOFF2 y TTF?
No necesariamente.
Durante años se ha recomendado incluir diferentes formatos para conseguir una compatibilidad lo más amplia posible.
Sin embargo, el panorama actual es mucho más sencillo.
WOFF2 es una opción excelente para navegadores modernos y está ampliamente soportado.
Por tanto, añadir archivos adicionales no debería ser la primera solución a cualquier problema.
Primero hay que descubrir por qué está fallando la fuente.
Después, si necesitas una alternativa por compatibilidad, puedes añadirla.
La tipografía también necesita pruebas
Aquí es donde entra el trabajo que muchas veces no se ve.
Cuando diseñamos una identidad visual o una web, la tipografía no es un detalle decorativo.
Es parte de la identidad.
Si una web utiliza Montserrat, por ejemplo, pero en iPhone aparece una fuente del sistema, la experiencia cambia.
Cambian las proporciones.
Cambian los saltos de línea.
Cambian los botones.
Y, en algunos casos, puede cambiar incluso la composición completa de una página.
Por eso, una tipografía no está realmente bien implementada hasta que funciona correctamente en los dispositivos que utilizan tus clientes.
En Lumazaki no nos conformamos con «se ve bien»
Cuando trabajamos una identidad visual o una web, no queremos que la tipografía simplemente funcione en nuestro ordenador.
Queremos que la experiencia sea coherente.
Por eso comprobamos cómo se comportan las fuentes, los pesos y los estilos en diferentes navegadores y dispositivos.
Porque una marca no debería cambiar de personalidad simplemente porque alguien la visita desde un iPhone.
Y aquí está la diferencia entre que una web funcione y que una web esté realmente cuidada.
La próxima vez que una fuente desaparezca, no culpes al WOFF2
La próxima vez que abras una web en un iPhone y descubras que la tipografía ha desaparecido, respira.
No empieces convirtiendo todos tus archivos a TTF.
Primero comprueba:
¿El archivo se carga?
¿La ruta es correcta?
¿El @font-face está bien declarado?
¿El peso utilizado existe realmente?
¿Hay algún problema con el servidor o CORS?
¿La fuente es variable y utiliza alguna característica problemática?
Solo después de comprobar todo eso tiene sentido buscar una solución diferente.
Porque el verdadero problema no suele ser que iPhone odie WOFF2.
El problema es que las tipografías web, como cualquier otra parte de una web, necesitan estar correctamente implementadas.
Y sí.
A veces una letra que desaparece puede acabar convirtiéndose en una tarde entera de detective.
Bienvenido al maravilloso mundo de las fuentes web.