12

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.

Tieme
  • 62,602
  • 20
  • 102
  • 156
Nick
  • 474
  • 1
  • 3
  • 14
  • Does not look like rendering issue, are you declaring font-weight? – David Nguyen Mar 03 '13 at 06:20
  • `body { font-weight:normal; }` Thanks for any ideas. – Nick Mar 03 '13 at 06:24
  • Can you paste the font-face declaration? – David Nguyen Mar 03 '13 at 06:36
  • 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: http://stackoverflow.com/questions/11459746/css3-webfont-smoothing-and-antialiasing-in-firefox-and-opera. 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 Mar 04 '13 at 06:01
  • 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 Mar 04 '13 at 14:18
  • pretty weird, I'm on mac and I see a difference, but on the google web fonts site they look the same. – David Nguyen Mar 05 '13 at 19:53

2 Answers2

37

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/)

Community
  • 1
  • 1
Tieme
  • 62,602
  • 20
  • 102
  • 156
  • 3
    I beg to differ. I am getting this problem on Windows 7 on Firefox only (Chrome and IE are smooth by default, I didn't have to do anything). I'm using font-family: Bitter, Georgia, serif – goamn Jun 28 '14 at 02:50
1

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.

BraMKJ
  • 183
  • 1
  • 11