CSS custom fonts

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

If you remove (or comment out) all other css class definitions, does the .semi_bold work? — Glogo, Sep 09 '14 at 12:56
http://css-tricks.com/snippets/css/using-font-face/ This link should make things more than clear for you. — Rishabh Shah, Sep 09 '14 at 12:58
Using only .ttf files won't enable all users of your site to make use of your custom font. Create multiple versions of your font by using a site like fontsquirl. These also provide the correct implementation example files. — timo, Sep 09 '14 at 13:14

score 5 · Accepted Answer · answered Sep 09 '14 at 12:56

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';.

score 1 · Answer 2 · edited May 23 '17 at 10:27

1

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.

edited May 23 '17 at 10:27

Community

1
1

answered Sep 09 '14 at 12:56

Jukka K. Korpela

195,524
37
270
390

CSS custom fonts

2 Answers2