6

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.

Community
  • 1
  • 1
J. C. Salomon
  • 4,143
  • 2
  • 29
  • 38

1 Answers1

10

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.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Re-reading the official documentation for `@font-face`, seems you're right: `font-variant` is not supported. – J. C. Salomon Jan 27 '13 at 04:44
  • 1
    @J.C.Salomon. right, by the CSS3 Fonts draft, `font-variant: small-caps` in `@font-face` should affect the rendering of the chosen font (typeface), in practice via OpenType features, not the choice of font. – Jukka K. Korpela Jan 27 '13 at 07:37