title: How to define font-face for multiple typefaces inside a single font file?
body: <p>I have a font family in a single font file with multipe weights &amp; styles (Regular, Bold, Italic, Bold Italic) and would like to define the font faces using @font-face tag. How can I do that?</p>
  
  <p>If I do this:</p>
  
  <pre><code>@font-face {
      font-family: 'Font Regular';
      src: url('font.eot');
      src: url('font.eot?#iefix') format('embedded-opentype'),
         url('font.woff') format('woff'),
         url('font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  }
  
  @font-face {
  font-family: 'Font Bold';
      src: url('font.eot');
      src: url('font.eot?#iefix') format('embedded-opentype'),
          url('font.woff') format('woff'),
          url('font.ttf') format('truetype');
      font-weight: bold;
      font-style: normal;
  }
  </code></pre>
  
  <p>... it shows both Regular and Bold in regular typeface.</p>
  
  <p>If I set font-weight: bold for h1, h2, h3 etc., it shows these elements as electronic bold. How can I extract multiple typefaces from a single font file?</p>