Firefox acaba de anunciar públicamente la Beta de su versión 3.6, con muchos y muy variados cambios, aunque en general apuntan a mejorar la performance del navegador para así mantener su segundo puesto frente a un amenazante Google Chrome que cada vez tiene más adeptos y de paso intentar continuar ganandole público a Microsoft. Sin embargo, hay un aspecto que está pasando desapercibido y es algo que a los desarrolladores importa y mucho.
Desde hace mucho tiempo es una verdadero desafío lograr que los sitios que uno desarrolla se vean igual en todos los navegadores y en todos los sistemas operativos, esto es así porque la forma en que cada uno de ellos trabaja suele diferir, y una de estas diferencias radica en las tipografias. Entre los problemas que nos encontramos tenemos diferencias "sutiles" entre navegadores pero cuando cambiamos de Sistema Operativo el tema se vuelve complicado, el primer inconveniente es directamente la no existencia de la tipografía seleccionada en el SO, pero también existe el problema de la forma en que las tipografias se "dibujan" en pantalla.
Para buscar una solución a este inconveniente desde hace tiempo se está recurriendo a una técnica llamada sIFR que consiste en reemplazar un texto por su equivalente en imágenes (GIF por ejemplo) o mejor aún Flash (SWF), de esta forma logramos sí que todos los sitios se vean igual.
Sin embargo, esta técnica tiene sus limitaciones, su implementación no siempre es sencilla para un usuario inexperto ya que necesita Javascript y, primero y principal, no es apropiada para cantidades grandes de texto, es decir, para una entrada de un blog no resuelve el inconveniente, la visualización no es óptima y el tiempo de procesamiento (la ejecución del código Javascript) es alto lo cual hace que la experiencia del usuario no sea mejor.
Se viene trabajando entonces en distintas alternativas para conseguir "fuentes embebidas": de esta forma, cuando un usuario ingresa a un sitio que requiere una fuente que no tiene instalada la descarga y utiliza, de la misma forma en que lo hace con una imágen, hoja de estilos o cualquier objeto.
Existen features de CSS que permiten realizar este trabajo desde la versión 2 de CSS, que no siempre los navegadores implementaron y que aún hoy restan algunas diferencias por resolver, pero también debemos encontrar un acuerdo sobre el formato de tipografias a utiilzar para que todos los navegadores en todos los Sistemas Operativos los muestren de la misma forma, necesitamos un estándard.
Microsoft dió el primer paso con su Internet Explorer al definir que no iba a soportar tipografias TrueType para las fuentes embebidas (?), en cambio decidió soportar el formato Embedded OpenType (EOT) el cual está basado en OpenType (llamado a ser "el sucesor" de Truetype) pero lamentablemente no es muy difundido y trajo más problemas que soluciones ya que sólo IE lo implementó.
Mozilla ahora toma un camino similar con su Firefox 3.6 y anuncia que está implementando el soporte al formato Web Open Font (WOFF), formato sobre el que viene trabajando hace un tiempo y que propone como el futuro de las fuentes embebidas. Para consolidarse como el estándar, este formato busca la aceptación de la comunidad por ser impulsado por Mozilla y ya cuenta con el soporte de algunos diseñadores de tipografías que comenzarán a utilizar este formato, de todas formas, Firefox es el único navegador que soporta este formato y cuentan con que alguien más se suba al tren.
Podemos hacer dos lecturas, la buena y positiva es que a alguien le preocupa al tema y está trabajando por resolverlo. La otra lectura sería que por el momento esto queda en terreno de un capítulo más de la guerra entre los diferentes navegadores donde el que pierde es el programador, por el momento tenemos que utilizar EOT para los navegadores de Microsoft, ahora WOFF para los de Mozilla, y para los otros no nos queda más que seguir recurriendo a sIFR.
6 Responses to “El futuro de las tipografías web” Leave a reply ›
Hola
Excelente tu artículo, quisiera compartir estos enlaces para saber si se puede añadir otras opciones que yo a nivel basico no sé si pueden ser útiles...
http://www.kirsle.net/wizards/ttf2eot.cgi
http://randsco.com/index.php/2009/07/04/p680
Un saludo
Daniel, muchas gracias por los links.
Existen muchas herramientas como las que enviaste, de hecho hay una oficial de MS para convertir de TTF a EOT, es de esperar que con WOFF pase lo mismo, habrá que esperar un tiempito.
Hola de nuevo
llevo toda la tarde probando, y bueno puedo decir que puedo hacer que funcione en todos los navegadores salvo en safari, donde no me funciona de ninguna de las maneras
En este link un usuario dan con una clave donde yo mismo he probado y me va muy bien, como he citado anteriormente.
http://www.zocalo.cl/ratonera/?p=1689
Espero que os sea de utilidad.
Un cordial saludo
Hola Daniel! gracias por la colaboración, voy a volver sobre el tema para seguir avanzando en esto y todo lo relacionado, recién estoy arrancando con esta serie de posts, suscribite al RSS o seguime en Tweeter así te enterás!
Respecto a los navegadores, como dije originalmente, todas estas cosas dependen de lo mucho o poco que los navegadores cumplan con los estándares y este en particular es un estándar no muy respetado.
Buenas de nuevo
Problema solucionado...
El problema puede venir de la fuente tipográfica, no siempre da seguridad a la hora de abrir con el safari....
con otras fuentes he podido ver que se ve en IE8, Opera, Mozilla, Chrome y Safari perfectamente bien
http://www.juandaniel.com/index2.html
http://www.juandaniel.com/index3.html
http://www.juandaniel.com/index4.html
el 2 y el 3 son iguales, lo uncio que cambia es la unida de medida de la fuente, unas en em, y las otras en px.
Saludos