Horrible rendering of @font-face in Chrome

Question

Hi,

I am wondering if there's a way to somehow force Chrome (Safari and Opera included) to render the fonts that are loaded by @font-face better? I'm not sure if it's only these two fonts, but I sincerely doubt it.

The top snapshot is the rendering of the text in Firefox 8. The one below is from Chrome(16). Now, this wouldn't bother me as much if it was rendering awfully in IE, too--but in IE it renders quite wonderfully (similary to FF).

So, I did try a few things:

1. Tried applying text-shadow. It made it seem a little better, but still pretty awful.
2. I tried using -webkit-font-smoothing: antialiased, but that didn't seem to have any effect at all.

Now, I could stop being an annoying perfectionist and simply use an image for the logo (since the smaller text doesn't render that badly, but still bad, mind you) and be done with it.

I don't really like that solution, but I will accept it if there is no other.

Thanks!

Answer 1

You can also ensure the SVG format is being used primarily. The upshot to this is the font will render perfectly in Opera/Chrome, the down side is that I have found line-height issues arise.

Use a chrome specific media query and replace the font with the SVG version exclusively.

Answer 2

https://stackoverflow.com/a/9041280/1112665

If your code is from font squirrel it may be as simple as just rearranging the order of some of your css.

Answer 3

I'm seeing almost the exact opposite on OS X. Chrome, Safari are fine and Firefox isn't displaying right.

Chrome 18.0.1003.1 dev:

Safari 5.1.2 (7534.52.7):

Firefox 9.0.1:

Opera 11.60 Build 1185:

Internet Explorer 9.0.8112 (under Parallels VM):

It looks like Windows 7 @font-face problems are quite common, and there are a lot of inconsistencies in general:

• @Font-Face Windows Woes (flynsarmy.com - 2010/05/29)
• @font-face gotchas (http://paulirish.com/ - 2010/05/05 )
• Font-face embedded fonts look fuzzy in Windows 7 browsers
• @font-face rendering in Windows 7