ve
aquí y genera tus fuentes. fontsquirrel hará todo el trabajo, hasta te creará un archivo css por fuente con el @font-face correspondiente. Buscalos y lleva ese código donde quieras mientras mantengas la ruta a la fuente.
Luego asegurate de que en la declaracion de @font-face coloques un valor para font-weight y otro para font-style. Esto es lo que te está faltando.
este ejemplo te va a servir:
Código CSS:
Ver original@font-face{
font-family: 'ale';
font-style: normal;
font-weight: normal;
src: url(Alegreya-Regular.otf);
}
@font-face{
font-family: 'ale';
font-style: normal;
font-weight: bold;
src: url(Alegreya-Black.otf);
}
@font-face{
font-family: 'ale';
font-style: italic;
font-weight: normal;
src: url(Alegreya-Italic.otf);
}
/*
notar que:
- pusimos un mismo nombre (ale) a todas las fuentes que forman parte de la misma "familia tipografica".
- declaramos distintos valores de font-weight y font-style, en otras palabras: tratamos las fuentes como "variables tipograficas" de la misma familia
*/
span { font-family: ale; }
strong { font-family: ale; font-weight:bold;}
em { font-family: ale; font-style:italic;}
/*
notar que:
- llamamos la fuente y diferenciamos por su valor de font-weight y/o font-style
- si omitimos valor para font-weight y font-style por defecto va a tomar "normal"
por lo tanto:
span { font-family: ale; }
es equivalente a:
span { font-family: ale; font-weight: normal; font-style: normal;}
*/
Controla no estes pisando los estilos. Desconozco tu html. Siguiendo estos pasos lo vas a lograr.
Suerte.