Google web fonts presents the Droid Serif font in these styles:
DroidSerif.ttf
DroidSerif-Bold.ttf
DroidSerif-BoldItalic.ttf
DroidSerif-Italic.ttf
I am interested in using the @font-face CSS rule to import all of these variations with the "Droid Serif" font-family, and utilize the font-weight property to specify bold and/or italic options, instead of importing them separately under different family names like so:
@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 there a way to achieve this?
P.S. I have tested all Google web font import methods, but none seem to work for IE 9.