title: How to add multiple font files for the same font?
body: <p>I'm looking at the <a href="https://developer.mozilla.org/en/CSS/@font-face" rel="noreferrer">MDC page for the @font-face CSS rule</a>, but I don't get one thing. I have separate files for <strong>bold</strong>, <em>italic</em> and <strong><em>bold + italic</em></strong>. How can I embed all three files in one <code>@font-face</code> rule? For example, if I have:</p>
  
  <pre><code>@font-face {
      font-family: "DejaVu Sans";
      src: url("./fonts/DejaVuSans.ttf") format("ttf");
  }
  strong {
      font-family: "DejaVu Sans";
      font-weight: bold;
  }
  </code></pre>
  
  <p>The browser will not know which font to be used for bold (because that file 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?</p>