@font-face es una clase compatible con IE6 + y navegadores que soportan CSS3, que nos permite introducir en nuestros diseños web fuentes no estandarizadas, para hacerlo funcionar correctamente tanto en explorer como en el resto de navegadores tenemos que disponer de la fuente en formato .TTF o .OTF y en formato .EOT el formato de fuente con el que trabaja internet explorer.
@font-face {
font-family: 'Graublau Web';
src: url(GraublauWeb.eot);
src: local('Graublau Web Regular'), local('Graublau Web'),
url(GraublauWeb.otf) format('opentype');
}
En cssblog.es podéis encontrar la información necesaria para poder interpretar el porque de cada propiedad, muy bien explicado y paso a paso.
MATERIAL INTERESANTE
Conversor de formato .TTF a .EOT
Formatos de fuentes compatibles por navegador
via: paul, cssblog.es
Diseño 
web 
Video