How to define bold, italic using @font-face

Question

I'm looking at the MDC page for the @font-face CSS rule, but I don't get one thing. I have separate files for bold, italic and bold + italic, how can I embed all three files in one @font-face rule? For example, if I have:

@font-face {
    font-family: "DejaVu Sans";
    src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
    font-family: "DejaVu Sans";
    font-weight: bold;
}

The browser will not know what font to use for bold (because that files is DejaVuSansBold.ttf), so it will default to something I probably don't want. How can I tell the browser all the different variants I have for a certain font?

Answer 1

Here I go answering my own question. The solution seems to be to add multiple @font-face rules, for example:

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

By the way, it would seem the Google Chrome doesn't know about the format("ttf") argument, so you might want to skip that.

Answer 2

Hi, thanks for this solution. I have a small problem. When I specify this:

@font-face {
    font-family: "whatever";
    src: url("fonts/whatever.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

It conflicts with my bold font. For instance, anything with the "strong" tag will become italic as well. I deleted the above font-face and that solved the problem, however, I cannot have bold italic fonts now.

Any idea why?

Oh, it might help if I clarified. Chrome v5.0.375.38 displays this perfectly, however Firefox v3.6.3 does not. Also, I am using Windows XP Pro.

Thanks, -Neil