title: Defining small-caps font-variant with @font-face
body: <p>How do I add a small-caps font as a variant?</p>
  
  <p>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?</p>
  
  <pre><code>/* A font by Jos Buivenga (exljbris) -&gt; 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");
  }
  </code></pre>
  
  <p>Related: <em><a href="https://stackoverflow.com/q/2436749/95580">How to add multiple font files for the same font?</a></em> and <em><a href="https://stackoverflow.com/q/10364458/95580">Properly defining font-family in @font-face CSS rules</a></em>.</p>