¿De qué hablamos?

En ocasiones, cuando le presentamos un diseño a un cliente, uno de los elementos que está sujeto a críticas es la selección de fuentes tipográficas. Nos vemos obligados a repetir una y otra vez el discurso de las fuentes estándares, que las otras si no están instaladas en el ordenador del usuario, no verá la web de la misma manera, etc.

Para solucionar esto con el tiempo se ha ido improvisando substituyendo textos por imágenes, y de una manera más novedosa aunque no menos costosa, sIFR, donde interviene el Flash haciendo nuestra web muy pesada y los respectivos problemas legales de los softwares.

Con el desarrollo de jQuery, llega una nueva forma de lograr que nuestras fuentes puedan ser reemplazadas por otras. Cufon.

Cufon es una interface web que busca imponerse a sIFR, evitando así tener que utilizar software de propietario y optando, en su lugar, por canvas/VML para lograr el mismo objetivo.

Técnicamente, Cufon es una interface web de fontforge que crea una fuente SVG partiendo de la fuente tipográfica (TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) y PostScript) que se determine y renderizandolo por JavaScript.

¿Cómo?

Bien, para llevar a cabo el reemplazo de los textos, utilizaremos jQuery. Tenemos que tener claro la fuente y que tenga una licencia de uso que nos permita disponer de ella.

Paso 1 - Obtener Cufon

Es recomendable que siempre se utilice la última versión comprimida disponible de cufon-YUI en el sitio oficial de cufon (archivo cufon-yui.js).

Paso 2 - Crear la fuente

Para crear la fuente se puede utilizar el generador de fuente. Tendremos como resultado un archivo con un nombre como este: TitilliumText14L_300_600.font.js.

Paso 3 - Reemplazar el texto

 
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">       
      <!-- documento que nos descargamos de la web oficial de Cufon -->
      <script src="cufon-yui.js" type="text/javascript"></script>
      <!-- docuemnto que obtenimos al convertir la fuente en el generador de cufon -->
      <script src=" TitilliumText14L_300_600.font.js "></script>       
      
      <!-- Declaramos los elementos que queremos que sean reemplazados -->
      <script type="text/javascript">
             Cufon.replace('h1');         
      <script>
    </head>
    
    <body>
      <h1>Este es un texto para demostrar el uso de Cufon.</h1>
    </body>
</html>


¿Qué ha sucedido exactamente?

Lo primero es incluir la versión YUI comprimida de cufon.

A continuación incluimos la fuente que creamos en el paso nº2. No es nada novedoso hasta ahora, solo hay que incluirlo como si fuera un archivo JavaScript cualquiera.

Para poder reemplazar todos los elementos <h1> en el documento, aplicamos el siguiente script:


Cufon.replace('h1').

Cufon utilizará las reglas de CSS asociadas al elemento <h1>.

¿Qué pasa con Internet Explorer?

En IE sucede que tarda un tiempo en que se reemplace la fuente estándar por la que le hemos decarado. Para corregir este problema será necesario añadir el siguiente script justo antes de la etiqueta que cierra el body (</body>):

<script> Cufon.now(); </script>

Y eso es todo. Que lo disfruten.