title: How to reduce font weight in Firefox on Mac with CSS?
body: <p>Here's my problem: I'm using font-face for the menu of my website, but Firefox on Mac displays it too bold
  On a PC, everything works well, the font is perfectly sized and looks like it should</p>
  <p>Unfortunatly, on Mac, i have to had a CSS hack for Safari (which works), but I didn't find anything similiar in Firefox.</p>
  <p>I've tried the &quot;text-shadow hack&quot;, i tried using the font-weight property (which pretty much doesn't do anything).</p>
  <p>And now, some code!</p>
  <pre><code>@font-face {
      font-family: 'KnockoutHTF48FeatherweightRg';
      src: url('font/knockout-htf48-featherweight-webfont.eot');
      src: url('font/knockout-htf48-featherweight-webfont.eot?#iefix') format('embedded-opentype'),
           url('font/knockout-htf48-featherweight-webfont.woff') format('woff'),
           url('font/knockout-htf48-featherweight-webfont.ttf') format('truetype'),
           url('font/knockout-htf48-featherweight-webfont.svg#KnockoutHTF48FeatherweightRg')     format('svg');
      font-weight: normal;
      font-style: normal;
  
  }
  </code></pre>
  <p>For Safari:</p>
  <pre><code>body{
      ...
      -webkit-font-smoothing: antialiased;
  }
  </code></pre>
  <p>Left if FF on Mac and right is FF on PC (the good version)
  <a href="https://i.stack.imgur.com/2QOnw.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2QOnw.jpg" alt="Screenshot" /></a></p>
  
  <p>Thanks!</p>