Usa cualquier Fuente con CSS

24/feb/2006 13

¿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 {
font-family: "LaMiaOriginal";
src: url(LaMiaOriginal.eot);
}
H1 {
font-family: "LaMiaOriginal", "Verdana", sans-serif;
}

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:

Comentarios

  1. Gabriel banda [#]

    Me parec muy buena tecnica, yo estaba buscando algo como
    esto desde hace tiempo, lo implementare espero y funcione.

  2. ZaKull [#]

    Gracias , por fin alguien que responde bn 😉

  3. felipe [#]

    gracias por el aporte, excelente truco, felicidades por tu web site

  4. Diseño Web [#]

    Lo he probado pero no me funciona

  5. tarjetas personales [#]

    en su lugar eh usado, cufon, en estas dos webs http://www.agroschur.com.pe, y http://www.impresionesfuentes.com.pe en nuestros dos ultimos diseños web y proyectos ya publicados… estamos esperando ver los resultados.

  6. Jorge Epuñan [#]

    Concuerdo, he utilizado Cufón ultimamente y me ha andado de lujo, muy recomendable.

  7. Más y mejores tipografías con @font-face ↝ CSSLab [#]

    […] utilizas como una propiedad font-family donde quieras incluirlas. Quizás ya conocías Cufón o SIFr, pero desde que uso @font-face he notado que es bastante más rápido en la […]

  8. David Perez [#]

    Muchas gracias,espero que me funcione

  9. Gigantografias [#]

    ya no es necesario usar cufon el @font-face ya funciona desde explorer 9 y en todos los demas navegadores aqui un ejemplo. http://www.remiserostudio.com/ y en el blog http://blog.remiserostudio.com/

  10. Jorge Epuñan [#]

    Totalmente de acuerdo Gigantografias, este articulo es del 2006 y esta al 2013, obsoletisimo.

  11. impresion laser digital [#]

    aun @font-face funciona bien, yo he puesto en la web http://www.remiserostudio.com/ las llamadas de JavaScript al final, pero los Font tienen que cargar primero, alguien saber como evitar esto.

  12. Imprenta Láser Digital [#]

    el cufon ya no se usa ya que en css 3 se puede usar las fonts desde los estilos.

  13. Ricardo [#]

    Hola si quisiera usar una fuente como webdings, cuál sería el procedimiento?

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab