¿Cansado de usar las mismas tipografías por defecto? Tuviste que cambiarte a Flash por este motivo? Pues hay un antiguo método para que puedas utilizar cualquier fuente TrueType en un sitio construído en HTML. Es bastante simple, pero necesita de algunos pasos previos y ciertos conocimientos. Démosle:

¿Porqué encrustar una fuente?
Una tipografía es un recurso del sistema operativo, no del browser. Si diseñas y construyen un sitio web localmente, en tu computador, utilizando una fuente no típica, por ejemplo, Futura, la podrás visualizar sin problemas. Pero no quien la visita y no la tiene instalada. Aquí comienzan los problemas. Flash fue durante mucho tiempo muy utilizado por esto, ya que permite ‘incrustar’ la fuente en al ingresarla como Static Text, y en el caso de la caja de texto ser dinámica, permite incluirla entera, o ciertos caracteres (lo que aliviana el peso del swf final). Pero con el crecimiento del uso de CSS en la web, se puede percibir claramente que se puede construir todo lo que hace Flash (bueno, casi todo) con AJAX y otros trucos. Y esto mucho más liviano, quizás algo más difícil. Lo que hace el uso de Javascript aún exclusivo para desarrolladores, y no tan divulgado entre diseñadores. Pero bueno, esto es materia para otro artículo.

¿Porqué no incluir una fuente?

  • Esto sólo funciona en IE 4+ y Netscape 5+. Si cierto browser no la reconoce, ignoran el código.
  • Aumenta el peso del sitio, ya que al incluir la tipografía, dependiendo de ella pueden ser desde 20kb hasta 500kb cada una. Si no sabes optimizar la cantidad de caracteres necesarios a ser utilizados, mejor olvídate de esto.
  • Es inseguro. Por lo menos eso es lo que creen los browsers, al tener que bajar una fuente para visualizar un sitio el browser lo encontrará inseguro y advertirá de ello. Un usuario común suele tener miedo a estos mensajes de advertencia, más aún por la moda actual de ataques de spamware.
  • Es necesario el uso de un software especial para convertir una fuente TrueType .ttf en Embeddable Open Type .eot.

Me preocupan más los contras que los pro, así que para mí no es una opción. Sólo si necesito un caracter muy especial y no puedo utilizar un gif. Así que en este artículo mi intención es sólo mostrar que existe esta posibilidad y cómo se hace. No explicaré más allá, o paso a paso.

Conversión de la tipografía:
El estándart es propio de Microsoft (más un motivo para no utilizarlo). El software WEFT convierte la tipografía en un .eot, lo que permite ser bajado y leído por IE.

Código: agregando la fuente:
El CSS utilizado quí es bastante simple, por lo que no debería dar mayores problemas:

@font-face {<br />
  font-family: "LaMiaOriginal";<br />
  src: url(LaMiaOriginal.eot);<br />
  }<br />
H1 {<br />
  font-family: "LaMiaOriginal", "Verdana", sans-serif;<br />
}

Siempre es bueno además agragar una tipografía estándart en font-family, ya que en caso de error en la tipografía que estás incrustando, se depliega la que más se parezca, definido por el diseñador.

El resto queda por cuenta de cada diseño.

Links: