Sobre la compatibilidad:
Una declaración de @font-face crossbrowser tiene esta forma:
Código CSS:
Ver original@font-face {
font-family: 'FedraSansProBoldItalic';
src: url('fedrasanspro_bolditalic-webfont.eot');
src: url('fedrasanspro_bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fedrasanspro_bolditalic-webfont.woff') format('woff'),
url('fedrasanspro_bolditalic-webfont.ttf') format('truetype'),
url('fedrasanspro_bolditalic-webfont.svg#FedraSansProBoldItalic') format('svg');
font-weight: normal;
font-style: normal;
}
A notar, los src con los .eot, .otf .woff, .ttf y .svg
Si solo tenes por ejemplo los .otf podes usar el fontface-generator de fontsquirrel.com para conseguir los demás.
Además presta atencion en la definición de font-style y de font-weight.
Esto debería ayudar a aclarar:
Código CSS:
Ver original@font-face{
font-family: 'AleNormal';
font-style: normal;
font-weight: normal;
src: url(Alegreya-Regular.otf);
}
@font-face{
font-family: 'AleBold';
font-style: normal;
font-weight: bold;
src: url(Alegreya-Black.otf);
}
@font-face{
font-family: 'AleItalic';
font-style: italic;
font-weight: normal;
src: url(Alegreya-Italic.otf);
}
span { font-family: aleNormal;}
strong { font-family: aleBold;}
em { font-family: aleItalic;}