sIFR: como usar tipografías no estándar en páginas web

sIFR: como usar tipografías no estándar en páginas web
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

4 comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

What is 7 + 12 ?
Please leave these two fields as-is: