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?
@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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With