Css – How to use font-weight with font-face fonts

cssfont-facefonts

I've got two font files like: FONT-light and FONT-bold. Both come from @font-face kit so each version has like 5 font files included (OGV, TTF, WOFF, EOT).

To go from light version to bold version I have to use font-family: FONT-light; and then font-family: FONT-bold;. I want to use font-weight: light; and font-weight: bold; instead because I need it to CSS3 transitions. How do I achieve that?

Best Answer

@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

From the tutorial: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

Related Topic