title: Firefox Icon Font Overly Bold Anti-Aliasing
body: <p>I'm aware that different browsers render text in different ways – and to a point, I'm cool with that. However upon experimenting with using icon fonts for one project, Firefox, in particular is irritating me. </p>
  
  <p>Essentially I have a row of social media icons, which are displayed via @font-face and some pseudo classes. Except Firefox has a little issue with rendering them nicely...</p>
  
  <p>Here's what they look like Chrome vs Firefox.</p>
  
  <p><strong>Chrome 23.0.1271.101 (Mac)</strong></p>
  
  <p><a href="http://cl.ly/image/0M3t2S3N2A38/">http://cl.ly/image/0M3t2S3N2A38/</a></p>
  
  <p>(Perfect)</p>
  
  <p><strong>Firefox 17.0.1 (Mac)</strong></p>
  
  <p><a href="http://cl.ly/image/053d2J0J312K">http://cl.ly/image/053d2J0J312K</a></p>
  
  <p>(Not-so-perfect)</p>
  
  <p>You can probably see the issue I have...</p>
  
  <p>I've also checked several other browsers to see if it's not just firefox. It is just firefox. Even IE does a nicer job.</p>
  
  <p><strong>The code:</strong> </p>
  
  <p>CSS</p>
  
  <pre><code>@font-face {
      font-family: 'icomoon';
      src:url('fonts/icomoon.eot');
      src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
      url('fonts/icomoon.svg#icomoon') format('svg'),
      url('fonts/icomoon.woff') format('woff'),
      url('fonts/icomoon.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
  }
  
  
  [class^="icon-"]:before, 
  [class*=" icon-"]:before {
      font-family: 'icomoon';
      font-style: normal;
      speak: none;
      font-weight: normal;
      line-height: 1;
      text-align: center;
  }
  
  
  .icon-flkr:before {
      content: "\2b";
  }
  .icon-fbk:before {
      content: "\2c";
  }
  .icon-twitter:before {
      content: "\3e";
  }
  .icon-lfm:before {
      content: "\24";
  }
  .icon-lkdin:before {
      content: "\25";
  }
  .icon-inst:before {
      content: "\26";
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul id="footer_social_list" class="group"&gt;
      &lt;li&gt;&lt;a href="#" class="icon-twitter" title="Follow me on Twitter"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="icon-fbk"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="icon-lkdin"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="icon-flkr"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="icon-inst"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="icon-lfm"&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I've tried a lot of things to try and fix this. From changing the opacity with CSS; to trying text shadow; changing the weights of both the @font-face, classes and inherited styles; using "data-icon"; even making sure each icon is aligned to the pixel grid. </p>
  
  <p>Nothing has yet yielded any improvement in Firefox, and I'd say with the slight exception of the Instagram icon in IE9, everything looks good in every browser. </p>
  
  <p>So why does Firefox do this? And is there anything I can do to make it behave?</p>
  
  <p>PS: I haven't added -webkit-font-smoothing: antialiased; not that it affects Firefox anyway.</p>