title: Firefox font-face rendering looks very different to e.g. Chrome
body: <p>I am having trouble with <code>@font-face</code> in CSS. The font I am using looks very different in each browser.</p>
  
  <p>See this example in Firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/5VWjx.png" alt="Firefox"></p>
  
  <p>And here in Chrome:</p>
  
  <p><img src="https://i.stack.imgur.com/yqp86.png" alt="Chrome"></p>
  
  <p>I don't know what causes this problem. I already tried to use <code>text-rendering</code> and I also tried changing the order of the <code>url</code>-properties in the <code>@font-face</code> declaration.</p>
  
  <p>I am using Windows 7 Professional and Firefox V30.</p>
  
  <p>Can somebody inform me about the reason for this issue and tell me how I could fix it?</p>
  
  <p>Many thanks.</p>
  
  <p>//EDIT:
  This is the <code>@font-face</code> declaration I am using:</p>
  
  <pre><code>@font-face {
      font-family: 'MyFont';
      src: url('myFont.eot');
      src: url('myFont.eot?#iefix') format('embedded-opentype'),
          url('myFont.svg#myfont') format('svg'),
          url('myFont.woff') format('woff'),
          url('myFont.ttf') format('truetype');
      font-style: normal;
      font-weight : normal;
  }
  </code></pre>
  
  <p>As I wrote above I already played with the order of this commands.</p>
  
  <p>In my particular problem you can see <a href="http://tablet.siemens.com/entry/cc/en/" rel="noreferrer">this page (footer)</a> showing the problem. </p>