Tipografías originales en tu web usando font-face

Hace algunas semanas os conté como insertar tipografías de google en nuestro site, en está ocasión os hablaré de como hacerlo con cualquier tipografía y sin necesidad de javascript.
La propiedad @font-face de CSS3 es la que hace posible que el navegador recoja la fuente directamente del servidor. Actualmente, lo soportan casi todos los navegadores, incluido Explorer 6, aunque añadiéndole algunas variantes.
Primero de todo, si queremos que la fuente sea soportada por todos los navegadores, la necesitaremos en formatos: eot (para internet explorer), ttf (para firefox, safari y chrome), svg (otros navegadores). Para generar estos formatos podemos hacer uso de herramientas como la que nos ofrecen en http://www.fontsquirrel.com/fontface/generator.
Una vez tenemos la fuente en todos los formatos, las guardamos en una carpeta de nuestro site, por ejemplo dentro de de la carpeta de los CSS.
A continuación tenemos que crear una hoja de estilos que contenga la propiedad font-face. Font-face le indica al navegador la ruta donde se encuentra la fuente tipográfica:

@font-face {

    font-family: 'ChunkFiveRegular';

    src: url('../fonts/Chunkfive.eot');

    src: local('ChunkFive Regular'),

    local('ChunkFive'),

    url('fonts/Chunkfive.woff') format('woff'),

    url('fonts/Chunkfive.ttf') format('truetype'),

    url('fonts/Chunkfive.svg') format('svg');

}

Si hacemos uso de generadores, es posible que también nos genere el archivo css.
Atención, @font-face no funciona si lo ponemos en el HEAD del documento. 

Por último creamos otra hoja de estilos donde llamamos a la fuente de la misma forma que lo hariamos con cualquier otra:

body{

font-family:'ChunkFiveRegular';

}

En el documento deberá enlazarse primero los estilos del font-face y a continuación el resto:

<link href="css/fonts.css" rel="stylesheet" type="text/css">
<link href="css/estilos.css" rel="stylesheet" type="text/css">

Cuidado, no abuséis de está propiedad, las tipografías pueden llegar a pesar bastante y el navegador puede trabajar más lentamente de lo habitual.