CODEWITHSUNDEEP
cssmacosfirefoxfontsrendering
Nick
Nick

Reputation: 474

Font-Smoothing in Firefox

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.

Upvotes: 12

Views: 28670

Answers (2)

Tieme
Tieme

Reputation: 65479

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

Upvotes: 37

BraMKJ
BraMKJ

Reputation: 193

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.

Upvotes: 1

Related Questions