In this example, we explicitly set the normal and bold version of the font family. As you see, this currently fails in Opera 10 due to a bug (which we're eagerly working on already) — the last @font-face
block for a particular font-family
overrides any previous definitions for the same family. In this case, the last @font-face
block defines a bold font, rendering the whole element it is applied on in bold. Luckily, there is a workaround for this (temporary) problem.
What does this mean in the real world?
There are many beautiful and interesting fonts that can improve aesthetics and increase visual variety on the web. Just as I am sometimes stunned by beautiful book designs, I want to be overwhelmed by beautiful web pages. And, I don't want those beautiful pages to be made up of background images.