using @font-face with multiple styles

Question

The Droid Serif font from Google web fonts has the following styles:

DroidSerif.ttf
DroidSerif-Bold.ttf
DroidSerif-BoldItalic.ttf
DroidSerif-Italic.ttf

I would like to use the @font-face CSS declaration to import all of these styles under the "Droid Serif" font-family and use the font-weight attribute to specify if I want bold and/or italic, instead of having to import each of them individually under a different font-family like:

@font-face {
    font-family: 'Droid Serif';
    src: url('../fonts/DroidSerif.ttf');
}

@font-face {
    font-family: 'Droid Serif Bold';
    src: url('../fonts/DroidSerif-Bold.ttf');
}

@font-face {
    font-family: 'Droid Serif BoldItalic';
    src: url('../fonts/DroidSerif-BoldItalic.ttf');
}

@font-face {
    font-family: 'Droid Serif Italic';
    src: url('../fonts/DroidSerif-Italic.ttf');
}

Is this possible?

P.S. I have tried each of Google web font's importing techniques and none of them work for IE 9.

Answer 1

This article helps explain bulletproof use of @fontface. Read down and you'll find something to help with IE.

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

I personally use font squirrel and reference the various files types to keep all the browsers happy. I'm not sure you can do what your asking, as far as i know you can't.

This also helps explain font weights for @fontface - Unless the font specifies that it's at a certain weight, then you wouldn't be able to change that. http://css-tricks.com/watch-your-font-weight/