Está bien, se están utilizando mucho hoy en día pero @font-face no es una de las nuevas propiedades CSS3; de hecho fue propuesta en CSS2 y ha sido implementada en IE desde su versión 5, aunque lo hicieron en el formato de fuentes propietario (como no, si siempre Microsoft lo hace) Embedded OpenType. Como fueron los únicos en utilizarlo de esa manera, y desde Safari 3.1 los fabricantes de browsers han utilizado TrueType (.ttf) y OpenType (.otf), IE ha tenido que adaptarse desde su versión 7. La especificación de los formatos son:

  • TTF – Funciona en todos los browsers excepto IE y Mobile Safari (iPhone/iPad).
    • EOT – Sólo IE.
    • WOFF – Comprimido y candidato a estándar.
    • SVG – Mobile Safari (iPhone/iPad).
SafariFirefoxOperaInternet Explorer 6Internet Explorer 7Internet Explorer 8

Esto es simple: primero debes disponer de las fuentes que quieres utilizar, luego las puedes utilizar tal cual o transformarlas a los formatos necesarios. Esas fuentes las importas mediante CSS y las utilizas como una propiedad font-family donde quieras incluirlas. Quizás ya conocías [Cufón][1] o [SIFr][2], pero desde que uso @font-face he notado que es bastante más rápido en la carga y es más versátil en su uso (ya que utiliza simple CSS y no depende de llamados JS).

Entonces, primero debes declarar la regla @font-face en tu hoja de estilos para importar las tipografías (nótese la ruta donde las tienes en el servidor, si no estas seguro mejor utiliza algún path absoluto).

@font-face {
   font-family: 'Delicious';
   src: url('Delicious-Roman.otf');
}
   @font-face {
      font-family: 'Delicious';
      font-weight: bold;
      src: url('Delicious-Bold.otf');
   }

Si quieres estar seguro de que se verá en la gran mayoría de los browsers, mejor impórtalas todas:

@font-face {
   font-family: 'Delicious';
   src: url('Delicious-Roman.eot');
   src: local('?'), url('Delicious-Roman.woff') format('woff'), url('Delicious-Roman.ttf') format('truetype'), url('Delicious-Roman.svg#webfont57ztNrX6') format('svg');
}

Y luego las declaras por simple CSS:

h3 { font-family: Delicious, sans-serif; }

[Ver demo][3]{.verejemplo}

Google actualmente está apoyando muchos desarrollos para Chrome y dispone de un importante catálogo de fuentes para su fácil e inmediato uso (y directo desde sus servidores).

[1]: http://www.csslab.cl/2006/02/24/usa-cualquier-con-css/ “Enlace en CSSLab a “Usa cualquier Fuente con CSS”” [2]: http://www.csslab.cl/2008/05/08/ms-tipografas-con-sifr/ “Enlace en CSSLab a “Más tipografías con sIFR”” [3]: http://www.csslab.cl/ejemplos/fontface/index.html “Enlace en CSSLab a “Demo 01 Font Face”” [4]: https://blogging.com/typography-basics/