Font-Smoothing in Firefox

11
votes

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:

-webkit-font-smoothing: antialiased;

but in Firefox I cannot find the declaration that controls this. I have heard of using a text-shadow hack to fix this, but I would prefer not to use this as it will undoubtedly change the geometric properties of the fonts.

Here is what it looks like in webkit (Chrome):

Chrome looks good

This is the blocky horrible rendering thanks to Firefox:

Firefox ugly

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:

on Font-combinator.com using firefox

After browsing through the css used to create font-combinator, I found this declaration: text-rendering: optimizelegibility;, but this does not work when applied to my element.

I have also tried:

text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;
font-smooth: never;
font-smoothing: antialiased;
-moz-font-smoothing: antialiased;

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?

I am using an relatively old version of FireFox (16.0.2) because this machine has an old version of OSX installed.

2
cssmacosfirefoxfontsrendering
Does not look like rendering issue, are you declaring font-weight? – David Nguyen
body { font-weight:normal; } Thanks for any ideas. – Nick Bewley
Can you paste the font-face declaration? – David Nguyen
Thanks for your ideas @Boris Zbarsky. The problem is the same with the other fonts on the page when comparing Firefox v Chrome. Anyways, I am working on a workaround since it appears that Firefox does not support a property like -webkit-font-smoothing:antialiased;. See: stackoverflow.com/questions/11459746/…. In either case, would you mind deleting your comment to keep my domain name off the message board? I really appreciate it! Thank you for your input! – Nick Bewley
The fonts look identical in Firefox and Chrome to me, for what it's worth, on a Mac. Are you just seeing differences in the font rendering that Direct2D and GDI do, if you're on windows? In any case, as I said the "antialiased" behavior is the default one for Firefox... So again, whatever you're seeing has nothing to do with the font smoothing behavior. – Boris Zbarsky

2 Answers

36
votes

This is a Firefox on OSX problem only...

I just answered this question: How to antialias SVG text in Firefox with a possible solution form your problem.

I think you could use the following attribute:

-moz-osx-font-smoothing: grayscale;

This will be released with firefox 25 (a nightly build can be found at http://nightly.mozilla.org/)

1
votes

Have you tried declaring a numerical font-weight instead of just 'normal' or 'bold'? There's a lot of differences in rendering of webfonts in different browsers.

Try setting {font-weight: 400;} for normal text and {font-weight: 700;} for bold.