title: @font-face, font variants
body: <p>This is my @font-face declaration to support different font variants, in this case the bold and bolder version of my font.</p>
  
  <pre><code>@font-face {
    font-family: "santana";
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: "santana";
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
    font-weight: bold;
  }
  @font-face {
    font-family: "santana";
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
    font-weight: bolder;
  }
  </code></pre>
  
  <p>Right now I'm just working with Chrome and Firefox. In Chrome the normal and bold variants work, but not the bolder variant (keeps the 'bold' one). In Firefox only the bold variant works as expected, in any other case the bolder variant is used (even for normal weight).<br>
  Is this a known issue or is there a better way to do this declaration?</p>