Font-Face Firefox 5 / 7 — only Windows — ugly color

I use a custom font with font-face and i开发者_开发技巧t works very well in all browsers except in Firefox on Windows. The color of the font should be grey #666. But it looks pink! Any idea how to avoid these ugly color in FF on win machines?

screenshot: Adobe BrowserLab

screenshot: Adobe BrowserLab enlarged

Edit: Comments have suggested that this is a font problem rather than a color problem, and after looking closer at the sample I agree. This is an example of extreme Cleartype smoothing - the green is unaffected while the red and blue have been deemphasized to make the line appear thinner. Since the background is white, this deemphasis makes the red and blue lighter, resulting in a pink/magenta tint.

The theory behind Cleartype is that these manipulations are supposed to be nearly invisible, and looking at your unzoomed example I'd say the tint is very subtle. It's only when you blow it up that it becomes obvious, at least on my monitor.

There might be a way to tune Cleartype on your own system, but this won't work on the web at large. The only fix would be to change the hinting on the font itself so it doesn't try to make such thin verticals.

Try using a color #666666 instead of #666.

From Wikipedia:

An abbreviated, three (hexadecimal) digit form is sometimes used. Expanding this form to the six-digit form is as simple as doubling each digit: 09C becomes 0099CC. This allows each color value to cover its full range from 00 to FF. The three-digit form is described in the CSS specification, not in HTML. As a result, the three digit form in an attribute other than "style" is not interpreted as a valid color in some browsers.

People should just accept that windows isn't good.. and neither is firefox. The combination of both is fatal when it comes to font rendering. This is especially annoying when using @fontface.

You can buy a Porsche and fill it with the best fuel or buy a Fiat and fill it with the wrong fuel..

..guess who will win the race?? (it's the same with a mac and a webkit browser compared to windows and gecko)

(I'm not saying a Fiat is a bad car but it would probably run better with a different fuel. A porsche would also accept less good fuel but still is a lot better if the fuel is SUPER) But a porsche would probably still win with the wrong fuel even if the FIAT had the perfect matching fuel.

strange comparison??? (Yes I guess)

Sadly net-surfers just don't know or care about this stuff and complain that the webdesigner has done a bad job. But all we do is give our best.. right?

So let's say Mrs.X bought that fiat and you told her to use Fuel-A. Her son will take the car and use fuel-B because it's cheaper .. Result: The car does not run as good as intended.

Back to the browser issues.

We sell one product.. but the client will show this product to (hopefully) millions of people. There is no chance to force all of the users to use a specific browser.. even less an operating system.

I know a lot of people that do not like GOOGLE and that's a reason for them not to use CHROME. Even though I think it's the best standard Browser. (My absolute favorite is SAFARI on OS X, because of it's nice webkit CSS and 3d rendering)

I also hate google (ok let's just say I'm not a fan) but I accept the 2 or 3 good products they have (my opinion.)

And as my last sentence I want to clarify my first one.

I don't like windows and there are a lot of reasons for that...

I used to like FF when I had a Windows machine (6 years ago)...

Firefox used to be the best browser (my opinion)...

Firefox (gecko) just can't keep up with webkit...

Windows will never get anywhere near OS X performance (my opinion)...

CONCLUSION:

Use a standard font as a fallback for browsers with issues. It might kill your design but it will not kill your visitors...