Geek Answers Handbook

Using @ font-face with multiple styles

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 CSS @font-face declaration to import all of these styles in the "Droid Serif" font-family section and use the font-weight attribute to indicate whether I want to be bold and / or italic, instead of importing each of them separately under another font-family as follows:

 @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 it possible?

PS I tried each of the font import methods on Google, and none of them work for IE 9.

+4
source share
1 answer

This article helps explain the bulletproof use of @fontface. Read it and you will find something that helps IE.

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

I personally use the squirrel font and refer to various file types so that all browsers are happy. I'm not sure that you can do what you ask, as far as I know, you cannot.

It also helps explain the font weight for @fontface. If the font does not indicate that it has a certain weight, you cannot change it. http://css-tricks.com/watch-your-font-weight/

+2
source

More articles:


All Articles