Me ha parecido muy interesante y útil la propiedad @font-face, con la que podremos usar las tipografías que veamos que vendrán más acorde con nuestros diseños y sin preocuparnos de que el usuario no tenga instalada la tipografía utilizada.
Es bastante sencillo de implementar. Primero de todo tenemos que subir la tipografía (ttf o otf) en el servidor a través de nuestro ftp.

Y creamos el archivo css:
[css]
@font-face {
/*Insertamos la ruta donde se
encuentra el archivo de la tipografia
y el formato de la tipografia*/
font-family: "la_tipografia";
src: url(http://www.tudominio.com/la_tipografia.ttf) format("truetype");
}

h1 {
/*Asignamos a la etiqueta h1 la tipografia
definida anteriormente y el tamaño*/
font: 40px "la_tipografia", sans-serif ;
}
[/css]

Y con esto podremos asignar “la_tipografía” a h1 sin ningún problema en los siguientes navegadores (Safari 3+ y 4+, Firefox 3.5, e Internet Explorer 7+)

Obviamente desde Internet Explorer 6+ tendremos que añadir código al documento html y comentarlo, ya que tendremos que convertir el formato de la tipografía a .eot. Desde WEFT 3 lo podéis usar para convertir las tipografías ttf a eot (ingles).

[css]
<!–[if IE]>

<mce:style type="text/css" media="screen"><! @font-face{ font-family:’la_tipografia’; src: url(‘http://www.tudominio.com/la_tipografia.eot’); } –>

<!–[endif]–>
[/css]

Sobre el autor

Macgrafic

Diseñador Gráfico y programador web. En el mundo del diseño gráfico llevo casi toda una vida... bueno para especificar llevo unos 15 años. Administrador de Macgrafic.com. Me gusta que la gente aprenda Indesign y se conviertan en diseñadores gráficos.

Comentarios (6):

1. 

   RSP

   Karles23 said:
   agosto 30, 2009 a las 1:41 pm

   Ostras pues si que es interesante, desconocia esta propiedad totalmente, muchas gracias!
   • 

     Pkdisseny replied:
     agosto 30, 2009 a las 6:51 pm

     Pues si Karles, es una propiedad muy interesante y potente. Lo malo es que hace un poco mas pesada la web en el tema de optimización de carga. Pero bueno para proyectos pequeños es muy bueno !
     Saludos
2. RSP

   Font Squirrel, gran catálogo de tipografias para @font-face | Mac Grafic said:
   septiembre 16, 2009 a las 8:01 pm

   [...] hace poco expliqué como Insertar cualquier tipografia con @font-face en tu web, ahora desde cssblog.es leo un artículo de una fantástica aplicación, Font Squirrel,  una [...]
3. 

   RSP

   Joomlero said:
   enero 2, 2010 a las 12:53 am

   Para los novatos como yo: al crear el archivo css, ¿a qué carpeta de mi servidor lo subo?

   ¿Hay que hacer uno por tipo de letra?

   Gracias y perdón si lo que digo es una bobería.
   • 

     Macgrafic replied:
     enero 2, 2010 a las 1:52 am

     Hola Joomlero,
     el archivo que tienes que subir a tu servidor depende de la ruta que le especifiques, lo puedes subir a la carpeta que quieras.
     No hay que hacer uno por cada letra.

     Saludos
4. 

   RSP

   Mauricio said:
   enero 6, 2012 a las 2:53 am

   Bueno, en mi opinión acepta todos los exploradores con el @font-face?, porque algunos si aceptan y otras no.