Quiero usar una fuente externa WebSymbols

y lo coloqué en mi declaración stylesheet.css

@font-face{ 
font-family: 'WebSymbolsRegular';
src: url('websymbols-regular-webfont.eot');
src: url('websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('websymbols-regular-webfont.woff') format('woff'),
     url('websymbols-regular-webfont.ttf') format('truetype'),
     url('websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
}

.fakeImage {
font-family: 'WebSymbolsRegular';
font-size: 12px;
text-decoration: none;
 }

Mi stylesheet.css ubicado en el archivo META-INF / resources / css / stylesheet.css. Puse los archivos de fuente (eot, svg, etc.) en el mismo directorio: META-INF / resources / css. En el encabezado de mi página jsf pongo referencia a esta hoja de estilo:

<h:outputStylesheet library="css" name="stylesheet.css" />

Pero en lugar de símbolos especiales de la fuente, recibí texto normal. Todos los demás estilos CSS se trabajan normalmente. ¿Alguna idea de cómo usar una fuente personalizada?