Agregando fuentes no estándares en una web cross-browser

Posted on 13 julio, 2012
in Diseño Web, Maquetado CSS / HTML
by Augusto César Rocca

Muchas veces los diseñadores nos proponen diseños web, visualmente increíbles pero que luego al maquetarlos en HTML/CSS para colocarlos en la web, nos encontramos que las fuentes que han usado no son estándares entonces tenemos el problema de perder dichos textos y tener que convertirlas en imágenes para poder ser usadas en la web.

Bueno la idea de este post es mostrarles algunas webs interensantes para poder insertar en sus páginas fuentes no estándares de manera de poder usar el texto en el formato que el diseñador a propuesto y aprovechar que el texto pueda ser indexado por Google orgnánicamente.

Catálogo de descarga de fuentes: Catálogo para buscar y descargar las fuentes que necesitamos.

1.- http://www.urbanfonts.com/

2.- http://fonts.simplythebest.net

3.- http://www.font-zone.com/

Agregando fuentes no estándares por @font-face: Mediante este sencillo script podremos agregar cualquier fuente de uso libre o bien del cual tengamos licencia de uso, la cual subiremos en alguna ruta de nuestro servidor y luego referenciaremos como dice el siguiente script:

<style type="text/css">
@font-face {
    font-family: "Fuente Argin";
    src: url(http://www.argin.com.ar/fuente-argin.ttf) format("truetype");
}
p.customfont {
    font-family: "Fuente Argin", Verdana, Tahoma;
}
</style>
<p>Hola Mundo!</p>

Un punto para estar atento es poder hacer este método Cross-Browser por eso les recomiendo: http://www.fontsquirrel.com/fontface/generator de manera de poder generar todas las fuentes para cada dispositivo distinto.

Agregando fuentes por Google Web Fonts: La manera más fácil de poder agregar una web externa es mediante Google Web Fonts, simplemente elegimos la fuente que queremos y seleccionamos el modo de inserción. Lo mejor de todo es que además Google nos muestra el tiempo de carga de cada fuente, como para tener en cuenta si la misma puede bajar la performance de nuestra web.

Listado de Fuentes: http://www.google.com/webfonts

Ejemplo de inserción: <link href=’http://fonts.googleapis.com/css?family=Balthazar’ rel=’stylesheet’ type=’text/css’>

Creando nuevas fuentes Cross-Browser con Cufón: Accediendo a http://cufon.shoqolate.com/generate/ simplemente van a poder crear las fuentes para que sean leidas correctamente por diversos browsers.

P.D: No se olviden de mirar grid960.cs como estándar de maquetado y diseño web.