Font-face font looks bolder in Firefox
cross-browser, css, font-face, fonts
Solution
Good news: it's probably not your fault. Bad news is, I'm not sure there's much you can do.
I looked at the site on my PC and it looked fine. I viewed the site on Safari on my macbook pro (w/ retina) and it looked great (other than the logo, which I assume is a raster graphic).
Firefox (version 17) looks bad (just like your screenshots). I disabled the style on the element, and even the default font looked terrible. Then I noticed that FF itself (the text on the tabs, for example) looked poorly aliased.
I then opened one of my own websites and it looked bad even though it uses Helvetica. This site looks bad (see my screenshot of the question below). Even my SVG images (which look beautiful on an iPad) look badly rendered.
Comparison (Safari on left, FF 17 on right)
My guess is that the problem lies much deeper than the font. I've noticed this with other apps on a retina display. I believe Chrome has the same issue.
Fix
A very recent beta (version 18) is slated to address these problems and appears to fix the issue completely, though the font still looks slightly different between browsers (you may now be able to tweak it with CSS)
Firefox users are usually good about updating, so this shouldn't be a problem for much longer.
Problem
I'm using `font-face` and my font looks awful in Firefox for mac. I've tried `-webkit-font-smoothing: antialiased` and `font-smoothing: antialiased`. Here are two screenshots: - http://cl.ly/image/160U3U3u180i - http://cl.ly/image/3y3G2s1v0p2Z Because of the retina screen the images turned out pretty large, so they look a bit zoomed in. Here is the URL to the website, if you want to look at any code. - http://marcusfriberg.com/standart/ Anyone have a good solution for this problem?