TypeFace: Insertando fuentes alternativas

Las fuentes de textos que podemos utilizar en una página web son limitadas porque lo que se verá no es necesariamente lo que nosotros establecemos sino aquello que permite el navegador de los visitantes. Podemos decir que un párrafo tendrá la fuente más exótica que se nos ocurra pero, si quien mira la página no tiene esa fuente en su PC, no la verá.

Es por eso que solemos definirlas con varios tipos o familias, para que, si no hay una, se cargue otra:

font-family: Georgia, Arial, Verdana, serif;

Es más, incluso se le agrega un último dato que indica un tipo más generico: serif, sans-serif, cursive, fantasy, monospace y claro, a menos que usemos las fuentes "seguras", el resultado es imprevisible:

Quisque lorem enim, pellentesque nec, tempus ut, pretium in, odio. Donec neque eros, ultricies sit amet, consectetur vel, ullamcorper sit amet, neque! Aliquam metus dolor, commodo ac, ultrices sit amet, blandit at, tellus?

¿ ... se verán las fuentes Bradley Hand ITC y Felix Titling ... ?

Maecenas lectus sapien, iaculis vel, tincidunt vitae, tempus viverra, justo. Fusce augue lacus, convallis id, tincidunt id, aliquet a, ipsum. Duis convallis enim quis pede! Sed ultrices; tortor sed tincidunt semper, massa leo semper lorem, ut luctus nullam.

Es verdad que existen métodos para incrustar fuentes externas utilizando CSS. De algún modo, es similar a insertar scripts, se requiere un archivo externo que se cargará junto con el resto de la página pero, sólo funciona en Internet Explorer y esos archivos, requieren de algún tipo de software para ser creados. A esto, se le suma una limitación más: muchas de las fuentes está protegidas por derechos de copyright y están inhabilitadas para ser insertadas en la web. De todas maneras, la idea es esta:

@font-face {
font-family: 'miFuente';
src: url(URL_archivoMiFuente);
}
p {
font-family:'miFuente', sans-serif;
}

¿Qué podemos hacer con los otros navegadores?

Una solución interesante aunque debemos usarla con prudencia, es la que muestran en divitodesign.com. Allí, hablan de TypeFace, un script que trasnforma HTML y CSS en imágenes y que, en principio, funciona en la mayoría de los navegadores modernos. Su uso es bastante sencillo ... aunque no lo parezca.

Primero, descargamos el script y lo alojamos en un servidor. Ahora (esta es la clave) necesitamos las fuentes y para eso, vamos a convertirlas en scripts utilizando este conversor.

Las fuentes TrueType se encuentran en nuestra computadora en el directorio /WINDOWS/fonts/ y, si queremos usar una de ellas, lo mejor es copiar el archivo en otra carpeta y recién luego convertirlo pero, nos encontraremos con una dificultad más, muchos están protegidos y no podremos usarlos, la herramienta nos lo advertira y se negará a crear el script.

Lo mejor, entonces, es buscar en la web fuentes de tipo open-source; hay muchas y algunos buenos sitios para comenzar a mirar son Open Font Library y dafont.com.

Con la herramienta, podemos convertir todos los que se nos ocurra y tendremos entonces, tantos archivos JS como fuentes alternativas quisiéramos usar. Por supuesto, deberemos alojarlas todas en un servidor..

Ahora, vamos a usarlo.

Supongamos que quiero estas tres fuentes:

5inq_-_Handserif.ttf
martyb_-_Ridiculous.ttf
tthurman_-_Riordon_Fancy.ttf

Las convierto y tengo tres scripts:

handserif_medium.typeface.js
ridiculous_light.typeface.js
riordonfancy_medium.typeface.js

Voy a la plantilla y agrego todo antes de </head>

<!-- cargar el script de la librería -->
<script src='URL_typeface-0.11.js' type='text/javascript'/>

<!-- cargar todas la fuentes -->
<script src='URL_handserif_medium.typeface.js' type='text/javascript'/>
<script src='URL_ridiculous_light.typeface.js' type='text/javascript'/>
<script src='URL_riordonfancy_medium.typeface.js' type='text/javascript'/>

Ya está. Si quisiera usar alguna de esas fuentes, bastaría colocar la clase typeface-js y agregar la familia de la fuente en el atributo style, tal como hacemos normalmente:

<div class="typeface-js" style="font-family: nombreFuente;">
....... el texto a ser mostrado .......
</div>

Ahora, algunos ejemplos colocados en un blog de pruebas utilizando las tres fuentes mencionadas.

Fuente Handserif

<div class="typeface-js" style="font-family: Handserif;">
....... el texto a ser mostrado .......
</div>

Fuente Ridiculous

<div class="typeface-js" style="font-family: Ridiculous;">
....... el texto a ser mostrado .......
</div>

Fuente RiordonFancy

<div class="typeface-js" style="font-family: RiordonFancy;">
....... el texto a ser mostrado .......
</div>

Las limitaciones y cosas a tener en cuenta:

• Por defecto, typeface.js se asocia con los elementos de encabezado (h1, h2, etc.) si en ellos se coloca la familia cargada. En esos casos, no es necesario agregar la clase como debemos hacerlo con cualquier otra etiqueta.
• Si una etiqueta ya tiene una clase, por ejemplo <div class='fecha">, podemos sumarle una segunda, separándola con un espacio: <div class='fecha typeface-js">
• Los scripts deben insertarse después del CSS y no antes, caso contrario, Firefox no aplicará el estilo.
• La propiedad font-stretch no es admitida.
• En Internet Explorer 7 hay una demora en el renderizado lo que produce un efecto indeseado. Puede solucionarse agregando esto antes de </body>:

<script type='text/javascript'>
_typeface_js.renderDocument();
</script>