Monday, March 15, 2010

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.

No comments:

Post a Comment