@font-face es una técnica para descargar fuentes remotas definida en el estandar css2. Te permite utilizar en tu sitio web fuentes poco convencionales que no requieren estar instaladas previamente en la máquina de quien visita el sitio web.

Para utilizarlo se declara en el css la regla de @font-face por cada familia.

@font-face {
font-family: 'EraserRegular';
src: url('EraserRegular-webfont.eot');
src: local('‚ò∫'), url('EraserRegular-webfont.woff') format('woff'), url('EraserRegular-webfont.ttf') format('truetype'), url('EraserRegular-webfont.svg#webfontEyeFkvc7') format('svg');
font-weight: normal;
font-style: normal;
}

Si te preguntas de donde sale todo ese código tan oscuro, la respuesta la encuentras en http://www.fontsquirrel.com FontSquirrel es un sitio donde encuentras cientos de tipografías para uso comercial totalmente gratuitas. Cada tipografía viene con un ‘kit’ que no es más que el código css para la tipografía y los distintos formatos para descargar por quién visita la página.

font-family: ‘EraserRegular’: Asigna el nombre ‘EraserRegular’ a nuestra fuente.
src: url(‘EraserRegular-webfont.eot’): Para que la tipografía sirva en Internet Explorer
SVG: formato XML soportado en algunos navegadores incluido el iPhone y el iPad

Para aplicar la fuente solo indicas que el font-family sea ‘EraserRegular’

#test p
{
font-family: EraserRegular;
}