Defining small-caps font-variant with @font-face

Question

How do I add a small-caps font as a variant?

I’m using Jos Buivenga’s Fontin, which has its small-caps variant as a seperate font rather than as an OpenType-style feature. This CSS snippet properly defines the regular, bold, and italic fonts in the family, but not the small-caps one. How can I make this work?

/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
@font-face {
    font-family: "Fontin";
    src: url(../Fonts/Fontin-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "Fontin";
    font-style: italic;
    src: url(../Fonts/Fontin-Italic.ttf) format("truetype");
}

@font-face {
    font-family: "Fontin";
    font-weight: bold;
    src: url(../Fonts/Fontin-Bold.ttf) format("truetype");
}

@font-face {
    font-family: "Fontin";
    font-variant: small-caps;
    src: url(../Fonts/Fontin-SmallCaps.ttf) format("truetype");
}

Related: How to add multiple font files for the same font? and Properly defining font-family in @font-face CSS rules.

Jukka K. Korpela Jukka K. Korpela · Accepted Answer · 2013-01-25T23:13:56

Unfortunately, it seems that the effective way is to fake the small-caps typeface as a font family, declaring it with e.g.

@font-face {
    font-family: "Fontin Small Caps";
    src: url(Fontin-SmallCaps.ttf) format("truetype");
}

(note the lack of font-style setting, defaulting it to normal) and using a rule like

p { font-family: Fontin Small Caps; }

without setting font-style.

Testing with the logical way, as described in the question, and using the .ttf font from http://www.exljbris.com/fontin.html I noticed that Firefox, Chrome, Opera all apply “fake small-caps” (i.e., uppercase letters in reduced size), when I set font-family: Fontin; font-variant: small-caps;. This is sad, but not very surprising.

The odd thing is that Firefox and Opera, but not Chrome, use the small-caps typeface of Fontin when I only set font-family: Fontin. This does not happen if I remove the @font-face rule that has font-style: small-caps. So the browsers are really hostile to the logical way using small capitals.

Defining small-caps font-variant with @font-face

1 Answers