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.ttfmartyb_-_Ridiculous.ttftthurman_-_Riordon_Fancy.ttfLas convierto y tengo tres scripts:
handserif_medium.typeface.jsridiculous_light.typeface.jsriordonfancy_medium.typeface.jsVoy 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>
Tanto las fuentes originales como todos los
scripts, están disponibles para ser descargados en formato
ZIP 
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>
Una extensión de 
