CSS custom fonts - html

Question

I have the following font files:
Raleway-Bold.ttf
Raleway-ExtraBold.ttf
Raleway-ExtraLight.ttf
Raleway-Heavy.ttf
Raleway-Light.ttf
Raleway-Medium.ttf
Raleway-Regular.ttf
Raleway-SemiBold.ttf
Raleway-Thin.ttf
Now i have implemented them in my css like follow:
#font-face {
font-family: 'Raleway';
src: url('/site/resources/fonts/Raleway-Regular.ttf');
}
.bold
{
font-family: "Raleway-bold"; !important;
src: url('/site/resources/fonts/Raleway-Bold.ttf');
}
.extraBold
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-ExtraBold.ttf');
}
.extraLight
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-ExtraLight.ttf');
}
.heavy
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-Heavy.ttf');
}
.light
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-Light.ttf');
}
.medium
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-Medium.ttf');
}
.thin
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-Thin.ttf');
}
.semi_bold
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-SemiBold.ttf');
}
However when i change the class to semi_bold for example nothing changes? so am i implementing them in a wrong way or am i missing something?
Note That the first raleway the font-face works fine but it is the rest that doesnt seem to make any changes to my text

Answer 1

You need to define all of your custom fonts in #font-face blocks. Only then can you use them in normal styles. Here you have defined Raleway only, so those classes which use it (all except .bold) will use Raleway-Regular.ttf.
#font-face {
font-family: 'Raleway';
src: url('/site/resources/fonts/Raleway-Regular.ttf');
}
#font-face {
font-family: 'Raleway-bold';
src: url('/site/resources/fonts/Raleway-Bold.ttf');
}
#font-face {
font-family: 'Raleway-semibold';
src: url('/site/resources/fonts/Raleway-SemiBold.ttf');
}
...
.normal {
font-family: 'Raleway';
}
.bold {
font-family: 'Raleway-bold';
}
...
Note that you need to define somewhere that ordinary text should use font-family: 'Raleway';.

Answer 2

You need to declare each typeface (here, each font weight) in a #font-face rule of its own. You should also use different font formats to cover all browsers. For a simple example for the former principle, see font-face weight and for the latter, use e.g. the FontSquirrel generator.