¿Quién no jugó alguna vez con HTML? ¿Quién no abrió el blog de notas gedit o incluso nano o vim y comenzó a tipear un modesto <html><head><title>Mi Web</title></head>….? ¿Quién no trató de descubrir los mas intrincados secretos de las hojas de estilo?
En estos últimos tiempos, con la tan esperada llegada de HTML 5 y CSS 3, nos encontramos con nuevas posibilidades a nivel de maquetación y diseño web. Una web con tendencias libres, donde todo es mas transparente y ya no necesitamos aferrarnos a oscuros hacks para lograr el resultado que queremos.
Una de las posibilidades que tenemos es usar una determinada tipografía en nuestra web, sin la necesidad de que el usuario la tenga instalada en el sistema. Y aquí es donde entra en juego @font-face.
Con @font-face podemos indicar en la hoja de estilos la fuente personalizada que usaremos en nuestra página, señalando de donde la descargará el navegador y a que nombre responde.
“Un gran poder conlleva una gran responsabilidad” ¡Por favor no hagas locuras como llevar esta fuente a la web!
La forma de uso es muy sensilla, con agregar un par de líneas a la hoja de estilo ya está todo hecho. Vamos a ver un ejemplo sencillo. Si quisiera usar la fuente “juanip.ttf” que se encuentra alojada en http://ejemplo.com/juanip.ttf solamente haría falta agregar algo como lo siguiente.
@font-face {
font-family: Juanip; /*nombre de la fuente*/
src: url('http://ejemplo.com/juanip.ttf'); /*dirección*/
}
Después de esto queda indicar que esa es la fuente que usaremos, como se hace con cualquier otra. Por ejemplo:
body {
font-family: Juanip, Helvetica, Arial; /*indicamos la fuente y algunas alternativas*/
}
Este es un ejemplo de como se vería con una fuente presonalizada (obviamente desde un lector de RSS no notarían la diferencia).
P.D: Si, es mi letra a mano alzada.
P.D.2: Si, tengo fea letra.