A la hora de escoger una tipografía para una página web nos encontramos limitados a una serie de fuentes estándar: verdana, arial, georgia, helvetica, times new roman, y unas pocas más. Cuando elegimos una tipografía para nuestra web, debemos pensar que para que un usuario pueda verla, tendrá que tenerla instalada en su equipo, de lo contrario se sustituirá por aquella que tenga configurada por defecto en su navegador. Son tipografías estándar por que cualquier usuario las tiene instaladas por defecto en su ordenador (sea cual sea su SO).
Si queremos usar una tipografía especial (gótica, handwritten, etc.) solo tenemos dos opciones: bien crear una imagen del texto con photoshop (o cualquier programa de edición de imágenes) y subirla a la web, o bien crear una regla CSS @font-face, que permite la descarga automática de la fuente en caso de que el usuario visitante no la tenga instalada. Ambos métodos tienen desventajas importantes, en primer lugar, tener que crear una imagen para cada texto de la web puede resultar una tarea tediosa, además de perjudicar al SEO. Además, tenemos el problema de que esta medida sólo sirve para contenido estático, es decir, que no varía. Por otra parte, es probable que tengamos problemas con algunos navegadores al usar @font-face, ya sea por que son antiguos o por que simplemente no lo soportan.
La solución para una página web con contenido dinámico es usar tecnologías sIFR, es decir, mediante JavaScript, CSS, DOM y ActionScript creamos una imagen en tiempo de ejecución (on-the-fly), que nos mostrará una imagen con el texto. Os recomiendo FaceLift, un pequeño script que podemos descargar de forma gratuita.
Más info | FaceLift
[…] ya comenté en una entrada del blog, la tecnología sIFR (Scalable Inman Flash Replacement) nos permite reemplazar el texto en una página web por una imagen u objeto flash. El uso que podemos […]
[…] de precios como banner o medio promocional; reemplazar el texto por imagenes o animaciones flash (técnicas sFIR); interfaz similar a la de una revista; utilización de bloques de texto con un formato especial […]
[…] tipografías no estándar en una página web a día de hoy requiere la utilización de tecnologías sIFR, mediante javascript, flash o imágenes. Todo esto cambiará con el atributo @font-face de CSS3, pero hasta que podamos utilizarlo, tenemos […]
[…] más interesantes es @font-face, que nos ofrece una funcionalidad similar a las técnicas sFIR, pero mucho más sencilla, limpia y menos aparatosa. Esta propiedad, que están incorporando en sus […]