@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.
