title: Using @fontface fonts load italic
body: <p>I have css like so:</p>
  
  <pre><code>@font-face {
      font-family: 'alegreya';
      src:url('fonts/AlegreyaBold.ttf');
      font-weight:normal;
      font-style: normal;
  }
  @font-face {
      font-family: 'alegreya';
      src:url('fonts/AlegreyaBoldItalic.ttf');
      font-weight:normal;
      font-style: italic, oblique;
  }
  @font-face {
      font-family: 'alegreya';
      src:url('fonts/AlegreyaBlack.ttf');
      font-weight:bold;
      font-style: normal;
  }
  @font-face {
      font-family: 'alegreya';
      src:url('fonts/AlegreyaBlackItalic.ttf');
      font-weight:bold;
      font-style: italic, oblique;
  }
  </code></pre>
  
  <p>And a rule for my class like this:</p>
  
  <pre><code>.font-alegreya {
      font-family:alegreya;
  }
  </code></pre>
  
  <p>And finally HTML:</p>
  
  <pre><code>&lt;li class="font-alegreya" data-styles="bold, italic, extrabold"&gt;
      Alegreya - Some sample words.
  &lt;/li&gt;
  </code></pre>
  
  <p>Now, I've read <a href="http://www.metaltoad.com/blog/how-use-font-face-avoid-faux-italic-and-bold-browser-styles" rel="nofollow">here on metaltoad</a> and other places on SO that using a single font-family is the preferred way to utilize custom fonts and that you have to put bold-italic last.</p>
  
  <p><strong>The Problem</strong> is that the font is displayed <em>italic</em>. By using <code>font-weight:normal</code> in the css class, I get normal display weight, but <code>font-style:normal</code> doesn't clear the italics. This makes sense, since under (-webkit) "developer tools" in the "resources" tab, I only see the <code>black-italic</code> font loaded (second in my CSS file). The font is installed on my computer, but I renamed the file on the server.</p>
  
  <p>I've observed this in opera (webkit) and IE11, so it's my code.</p>
  
  <p>Edit: As mentioned in the comments, I had bold and black inverted. That accounts for the bold. But italic is still an issue.</p>