Ojo con usar @font-face, los navegadores menos recientes no lo soportan.
FF desde la versión 3.5 (actual v3.6)
Opera desde la versión 10 (actual v10.6)
IE sólo soporta formato EOT.
Chrome desde la versión 4 (actual 6.0)
Fuente
Como se puede ver todavía falta un largo camino por recorrer hasta que las versiones que no lo soportan dejen de usarse.
La técnica de la imagen de fondo es muy utilizada y no le veo nada de malo. La única contra es que el texto no es seleccionable. Pero el código queda impecable para robots, navegadores para ciegos y demás. Si en vez de ponerle
display:none; a un
span, le pones
text-indent:-9999px; al elemento que contiene el texto, te ahorrás el span y te ahorrás sospechas de Google por ocultamiento.
Si de todas formas elegís usar @font-face, es muy recomendable especificar substitutos de fuentes seguras, que ocupen las mismas dimensiones.
Acá se explica muy bien.
Saludos!