Using CSS3 @font-face to “fake” multiple font weights

CSS2 specifies additional font weights, beyond Normal and Bold. In particularly there are 9 font weights in total – 100, 200, 300, 400 (normal), 500, 600 (bold), 700, 800 and 900. Unfortunately browsers still somewhat lack support for this feature, but more importantly fonts lack support for this. Many fonts however, still come with only normal and bold weights. Moreover, based on a few tests, even professional fonts that come with multiple weights (such as thin, light, regular, bold, heavy, etc.) don’t actually support these weights in the same way as the CSS2 specification dictates, in other words they can’t be used out of the box like that.

For example, I have the Arno Pro font (a nice serif font from Adobe). It comes in 4 weights – regular, bold, light and semibold. Each is encapsulated in its own file with a distinct name, e.g. ArnoPro-Bold, ArnoPro-Smdb, ArnoPro-Light, etc. I don’t know much about how fonts work but based on a bit of reading I’ve done, for a font like that I should be able to declare a style that uses “ArnoPro” font-family and based on the weight I assign to a particular element it would use a different version. For example, ArnoPro-Light for 200, ArnoPro-Regular for 400 or normal, and so on. However, based on a few tests I’ve done that doesn’t seem to be the case. In fact “ArnoPro” font isn’t recognized at all, only if I specify explicitly “ArnoPro-Smbd” does it recognize the font. And of course when it’s done like that all but the regular version are stuck with one weight, i.e. font-family:ArnoPro-Smbd; font-weight:normal looks exactly the same as font-family:ArnoPro-Smbd; font-weight:bold.

In short, the situation is less than ideal. However, there may be a at least a partial fix. Read more »