@font-face

Cuando hicimos el último rediseño de la web, en noviembre de 2010, una de sus señas de identidad estética fue el uso de la fuente American Typewriter en algunas zonas, principalmente títulos de secciones y de módulos.

Dicha fuente no es una fuente estándar. Por tanto, para implementarla, la empresa encargada de ayudarnos con el rediseño nos aconsejó el uso de la librería Cufon. Cufon es una librería Javascript que se encarga de, una vez cargado el HTML, sustituir las fuentes por las elegidas, empleando componentes canvas y VML.

Así lo hicimos, porque andábamos liados con mil cosas. El resultado quedó aparente, pero no estábamos del todo satisfechos.

Lo que ha encendido la mecha ha sido ver que Cufon no funcionaba con IE9. Bastaba con actualizarlo para solucionar el problema, pero empezamos a buscar alternativas, y fue cuando rescatamos del olvido @font-face.

Siguiendo un tutorial de los muchos que podemos encontrar, hemos implementado @font-face en nuestra web. Se trata de una característica de CSS, propuesta en la versión 2, y que soportan la gran mayoría de los navegadores. Básicamente, definimos cada familia de fuentes que queramos usar, indicando dónde están los ficheros para obtenerlas. Cada navegador utiliza un formato diferente. Una vez definidas las familias, pueden emplearse en la hoja de estilos como si fueran fuentes estándar.

El único inconveniente que hemos encontrado es que las fuentes deben estar alojadas en el mismo subdominio que la web, salvo que empleemos una cabecera especial para servirla desde nuestros servidores de estáticos. De momento hemos optado por que sean los frontales quienes las sirvan.

Ahora las fuentes especiales se muestran más rápidamente y sin necesidad de Javascript, por lo que conseguimos una librería menos que descargar al acceder a la página.