el blog del isra

Web Fonts se refiere a los tipos de letra que utilizamos en nuestro sitio Web, sin limitarnos a usar fuentes genéricas. Sólo es necesario cargar el archivo de la fuente y definirla en nuestra hoja de estilos usando la regla @font-face, dándole un nombre que será indicado en la propiedad font-family del elemento que la utilice.

@font-face{
    font-family: 'TipoDeLetra';
    src:url(fonts/fuente.ttf);
}

Teniendo esta definición, cualquier elemento que tenga la propiedad font-family:TipoDeLetra utilizará el archivo fuente.ttf en la carpeta fonts de nuestro sitio como el tipo de letra, sin importar si ya tenemos esa fuente instalada en nuestra computadora.

body{
    font-family:Serif;
}
p{
    font-family:TipoDeLetra,Serif;
}

Como ejemplo real: mencioné en el artículo anterior que la fuente preferida de los sitios de Opera (incluyendo este blog) es Trebuchet MS. En esta hoja de estilos se indica que para #wrap1 (que abarca todo el contenido de la página) se utilicen las fuentes Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Arial y Helvetica, en ese orden, y de no encontrarse ninguna, que utilice la Sans-Serif predeterminada. Por lo que los usuarios de otros sistemas operativos (y los que les encanta moverle a su Windows y echarlo a perder) no verán esta fuente, sino que se usará una de las otras alternativas o la Sans-Serif que use su navegador.

Pero los que usen la versión 10 de Opera en uno de esos sistemas operativos, verán que realmente se carga la fuente Trebuchet. Esto es porque en mi hoja de estilos de usuario definí la regla @font-face para usar los archivos ttf de esa fuente, los cuales cargué en los archivos de mi cuenta.

@font-face{
    font-family: 'Trebuchet MS';
    src:url(fonts/trebuc.ttf);
}

Esto sólo aplica para mi blog, porque es el único que usa mi hoja de estilos. No sé por qué a Opera no se le ha ocurrido hacerlo, si a final de cuentas, sería otra forma de publicitar su navegador, más adelante diré por qué.

Volviendo a la definición de la fuente. Ya agregamos la referencia al archivo de Trebuchet MS, pero ¿qué pasa si incluimos texto en negritas o en cursivas? El archivo trebuc.ttf sólo define el texto en dicha fuente, pero regular. Si revisamos nuestra carpeta de fuentes de Windows, hay otro tres archivos, para negritas (trebucbd.ttf), cursivas (trebucit.ttf) y negrita-cursiva (trebucbi.ttf). El subrayado no tiene un archivo propio, pues de eso se encarga el sistema operativo. Debemos agregar una definición para todos estos estilos:

@font-face{
    font-family: 'Trebuchet MS';
    src:url(fonts/trebuc.ttf); /*Regular*/
}
@font-face{
    font-family: 'Trebuchet MS';
    src:url(fonts/trebucbd.ttf); /*Negrita*/
    font-weight:bold;
}
@font-face{
    font-family: 'Trebuchet MS';
    src:url(fonts/trebucit.ttf); /*Cursiva*/
    font-style:italic;
}
@font-face{
    font-family: 'Trebuchet MS';
    src:url(fonts/trebucbi.ttf); /*Negrita cursiva*/
    font-style:italic;
    font-weight:bold;
}

Todas llevan la misma familia Tebuchet MS, pero el archivo difiere dependiendo las propiedades que le indiqué.

h1{
    font-family:'Trebuchet MS';
    font-weight:bold;
}
p,h2{
    font-family:'Trebuchet MS';
    font-style:italic;
}

Todo elemento <h1> usará la segunda regla para Trebuchet MS, que indica que el texto será en negrita. Los elementos <p> usarán la tercera, pues se indica que son en cursiva. Los elementos <h2> usarán la última declaración, ya que establecimos que serán letras cursivas, y este elemento H2 ya tiene de forma predeterminada el texto en negrita

Ahora, echemos nuevamente a volar nuestra imaginación. Imaginemos un mundo en el que todos los navegadores obedecen a las nuevas tecnologías y funciones que ofrecen los estándares Web, como CSS3. Pues esto sí seguirá siendo un sueño guajiro! Desafortunadamente, el único estándar que se obedece es tener una computadora de hace 10 años con un Windows XP e Internet Explorer 6. A Microsoft le tuvo que llegar el 2009 para aceptar un estándar que tenía una década de madurez, en una versión de su navegador que apenas si es usado por un porcentaje de su mercado. IE6 sigue siendo la piedra en el zapato de los programadores. IE7 era un poco más decente, pero igual es muy caprichoso. Así que tendremos que esperar otros 10 años para que el navegador más popular del mercado aproveche la regla font-face, como el resto de los navegadores ya comenzaron a hacerlo.

Hasta donde sé, Opera 10 y Safari son los únicos que oficialmente soportan la regla font-face (no sé si Konqueror también, avísenme, Linuxeros), pero lo hacen de forma distinta. Opera, que creo que hace lo correcto, utiliza la fuente solamente si el sistema operativo no la tiene instalada. Safari aplica la regla siempre que la encuentre, sin revisar que la fuente exista en el equipo del usuario. Por lo que si no definimos estilos para negrita y cursiva, Safari no la buscará en las fuentes instaladas de Windows, y aplicará el estilo regular para todo el contenido.

Realmente conviene dejar atrás esos navegadores obsoletos, y disfrutar de lo nuevo, que viene todos los días, ya hablé de eso en uno de mis primeros posts (aquí). Claro que eso es muy difícil, pues es muy difícil que la gente cambie de lo que tiene seguro, malo, pero seguro.

Pero sea como sea, aunque toda esa gente no pueda disfrutarlo, no significa que o podamos darnos el lujo de darle tanta belleza a nuestras páginas como se merecen Yo estoy haciendo un sitio Web para mi trabajo, y no porque el 90% de la gente no pueda ver sombras en los textos, o tengan su computadora con Windows y les importe un rábano si utilizo web fonts para que los demás puedan verlo de la misma forma, voy a resignarme a que el diseño no quede bien para ese 10%. A ver si con efectos bonitos atraemos más público a los navegadores buenos

Por cierto, esto me lleva a algo importante: las reglas @font-face deben ser escritas al final del archivo CSS, pues si un navegador como Internet Explorer encuentra esa regla, tendrá conflictos y dejará de cargar la hoja, omitiendo todo el contenido a partir de esa línea.

EDITO: FireFox ya soporta Webfonts en su última versión. Cuando hice la prueba usé una versión anterior que no lo soportaba.