How to properly use @font-face

I've spent some time playing around with some of the new features in CSS3. Thankfully, these are pretty well implemented in modern browsers (read: not in IE). One feature that I really like is the @font-face rule. Finally, no more cross-platform rendering problems, with buttons that appear wider / narrower than they should and so on. However, I couldn't find anywhere how to specify different variants of the same font family. What I mean by that is that, for example, for the font "Liberation Sans" I have 4 variants (each in its separate file): Regular, Bold, Italic and BoldItalic. How can I specify all these under the same font family? Because if I don't, and use just one @font-face rule with just the regular variant, the browser won't know what to use for, for example, <strong&gr; tags, because it has no default "bold" font defined. The solution I've found is to define multiple @font-face rules, under the same font-family. Example: @font-face { font-family: "MyCustomFont"; src: url("fonts/LiberationSans-Regular.ttf"); } @font-face { font-family: "MyCustomFont"; src: url("fonts/LiberationSans-Bold.ttf"); font-weight: bold; } @font-face { font-family: "MyCustomFont"; src: url("fonts/LiberationSans-Italic.ttf"); font-style: italic; } @font-face { font-family: "MyCustomFont"; src: url("fonts/LiberationSans-BoldItalic.ttf"); font-weight: bold; font-style: italic; } body { font-family: "MyCustomFont", sans-serif; } div.really_important { font-weight: bold; /* this works! */ }

Syntax Highlighting by Pygmentool

This way, you are defining multiple variants for the font family MyCustomFont. Finally, I understand why they call it font-family.

Another Internet Explorer annoyance that you might not be aware of

Recently, I've been using display: inline-block in CSS a lot. It's a very useful feature -- it allows you to have a fix-sized (e.g. 100x20px, or just fixed width / height) element that is inline, incredibly useful when doing precision design work. However! Internet Explorer 7 cannot handle display: inline-block on an element that is natively a block element. So, for instance, if you try to use inline-block on a <div>, it will work fine in any browser except IE7 which will consider it display: block. Now I'm stuck with using <span> everywhere. Ugh.