Typeface.js: tus fuentes a la vista de todos

Ya hemos probado el reemplazo con flash (Sifr); hemos visto cosas como el Facelift (que no me gusta mucho, porque usa php); y cientos de páginas que nos cuentan cómo reemplazar texto por imágenes (muchas de ellas a cada cual más complicada y dificultosa).

Pues bien: para aquéllos a quienes no les convence ninguna de las soluciones que nos ofrecen y, por la razón que sea, no desean usar flash, tenemos una oportunidad con Typeface.js

Con un script, un CSS y un HTML apropiados, podemos rendir nuestras fuentes y mostrarlas a los visitantes, como si ellos mismos las tuviesen instaladas.
Las especificaciones de CSS2 permiten acoplar la fuente al estilo que deseemos (color, tamaño, estilo, espaciado...).

Tiene algunas pegas en algunos navegadores, con cosas como los "hover", p.e. (habría que usar "canvas", que no se lleva muy bien con algunos), pero funciona bien en Firefox2, por ejemplo, aunque creo que no tanto en IE7...

Necesitamos pasar la fuente que deseamos usar a formato typeface.js: la página ofrece tres fuentes y un convertidor, para pasar la fuente que deseamos a Typeface.js.
El convertidor no es "milagroso", porque no puede convertir todas las fuentes, pero sí muchas. Y me gusta cómo funciona. Para ello, casi mejor que si nos bajamos una fuente, lo hacemos en formato ttf y no en Zip, antes de someterla al convertidor (hablo para plataformas Windows).
>
En mi blog Nada podéis ver cómo queda el Typeface.js, que he aplicado a los títulos de las entradas y de los elementos de la sidebar, con la fuente "kawoszeh_medium". Y en este blog de pruebas podéis ver el Typeface.js en los títulos de las entradas (la fuente es "skirules-sans2_expanded_medium") y una prueba en el cuerpo de la primera entrada (el título con la fuente Skirules y el texto restante con la fuente "justoldfashion_regular").

Necesitamos lo siguiente:

.- Un Css, en el que incluiremos la fuente que deseamos mostrar, por ejemplo en h1, para el título del blog; en h2, para los títulos de las entradas... por ejemplo:

#main h2{color:#1E2C37;font-size:21px;font-family: kawoszeh, georgia...;)

.- SCRIPTS: Necesitamos el Typeface.js, además del script que contendrá nuestra fuente, convertida a Typeface.js. Por ejemplo:

<script src='http://.../typeface-0.10.js' type='text/javascript'/>

<script src='http://.../kawoszeh_medium.typeface.js' type='text/javascript'/>

.- HTML: Por ejemplo, para la muestra anterior, que nos permitirá ver Typeface en los títulos de las entradas:

<b:if cond='data:post.title'>


<h2 class='typeface-js' style='font-family: kawoszeh'>


<b:if cond='data:post.link'>

<a expr:href='data:post.link'><data:post.title/></a>

<b:else/>

<b:if cond='data:post.url'>

<a expr:href='data:post.url' title='Nada Entradas'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

</b:if>

</h2>

Otro ejemplo: para usar Typeface en el cuerpo de una entrada, éste es el formato, más o menos, para escribir nuestra entrada:

<h2 class='typeface-js' style='font-family: skirules-Sans2; font-size: 28px'>Typeface.js</h2></br></br></br></br>





<div style="font-family: JustOldFashion; font-size: 18px; color: #990000" class="typeface-js">Con typeface.js puedes "embeber" fuentes en tus páginas web, así no tienes que usar flash para reemplazar texto por imágenes. Ejemplos: en el texto de esta entrada. La fuente es "JustOldFashion", y la del título del texto es "skirules-sans2", así como la del título de todas las entradas...

</div>

En realidad es muy fácil de usar: sólo hay que tener cuidado con el nombre de la fuente, a la hora de especificarla dentro del CSS.