title: @font-face does not work properly for italic/bold fonts
body: <p>I am using a tool to generate automatic CSS, and it generates the following @font-face tag and the corresponding paragraph Style</p>
  
  <pre><code>@font-face {
      font-family:FF-Garamond-Italic;
      src:url("../fonts/16309_GARAIT (1).ttf");
      font-style:italic;
  }
  
  p.autoParaStyle3 {
      font-family:FF-Garamond-Italic;
      font-size:32px;
      line-height:40px;
      color:#000;
      text-align:justify;
  }
  </code></pre>
  
  <p>Notice, that the font specified is already the italic version of the Garamond Font, and technically the line <code>font-style:italic</code> is redundant.</p>
  
  <p>However, as is, this does not work (I tried in FF, Chrome &amp; Safari), and ends up using the default system font instead. If I manually remove the <code>font-style:italic</code> line, then the text is correctly rendered in the Garamond Italic font as expected.</p>
  
  <p>So, I have 2 questions</p>
  
  <ol>
  <li><p>Why does this not work, meaning why does having a <code>font-style:italic</code> cause it not to work?</p></li>
  <li><p>Is there a way to "override" the @font-face definition to use <code>font-style:normal</code> via javascript? <br/>
  The reason I am asking is that I don't control the tool that is generating the CSS above, so cannot touch that file. <br/>
  Also, I attempted to create a new @font-face in javascript with the same name, but I don't want to specify the "src" again in the index.html, as this file and the css file are further manipulated into different locations - so I want the "src" to be relative to the css file only, and be picked from there.</p></li>
  </ol>
  
  <p>Thanks in advance!</p>