title: Font-Smoothing in Firefox
body: <p>Using Google WebFonts ("Oswald" in this case), I have found that my fonts are rendered bolder than they should be. I have solved this problem in webkit based browsers using:</p>
  
  <pre><code>-webkit-font-smoothing: antialiased;
  </code></pre>
  
  <p>but in Firefox I cannot find the declaration that controls this. I have heard of using a <code>text-shadow</code> hack to fix this, but I would prefer not to use this as it will undoubtedly change the geometric properties of the fonts. </p>
  
  <p>Here is what it looks like in webkit (Chrome):</p>
  
  <p><img src="https://i.stack.imgur.com/f962h.png" alt="Chrome looks good"></p>
  
  <p>This is the blocky horrible rendering thanks to Firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/t3kK6.png" alt="Firefox ugly"></p>
  
  <p>I know there is a way to achieve this in FireFox, because I found this font on font-combinator.com, and it renders properly on font-combinator using Firefox. Here is what it looks like on Firefox through font-combinator.com:</p>
  
  <p><img src="https://i.stack.imgur.com/7hfRh.png" alt="on Font-combinator.com using firefox"></p>
  
  <p>After browsing through the css used to create font-combinator, I found this declaration: <code>text-rendering: optimizelegibility;</code>, but this does not work when applied to my element.</p>
  
  <p>I have also tried:</p>
  
  <pre><code>text-rendering: optimizeLegibility;
  text-rendering: geometricPrecision;
  font-smooth: always;
  font-smooth: never;
  font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  </code></pre>
  
  <p>How can I get Firefox to antialias my fonts so that they look right when displayed? Can you find the declaration, or combination of declarations that makes them display properly on www.font-combinator.com? </p>
  
  <p>I am using an relatively old version of FireFox (16.0.2) because this machine has an old version of OSX installed.</p>