Horrible rendering of @font-face in Chrome
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.
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
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.