I have been searching on this matter, but with no clear understanding of the problem. I am getting pretty ugly pixelated font renderings on some Windows 7 browsers. I'm using @font-face in my CSS.
Is this a @font-face problem? Should I be using <link> to link fonts instead?
How can I solve this problem?
I'm assuming for a second that you have your CSS formatted perfectly.
I've been frustrated about this too. I'll try to share my experience: Most browsers use a font rendering engine installed with the browser. Firefox and IE do this, and they display fonts pretty well. Chrome, however, does things differently. It uses the native OS font rendering engine and that creates blind spots. On Windows (in my experience W7 & W8), the rendering has always been ugly for me for alternative fonts (eg google web fonts), even after changing OS font rendering settings. Some exotic css rules seem to help (-webkit-font-smoothing), but it never completely fixed the pixelation issue for me.
For development purposes I suggest ignoring the pixelated font on Chrome and looking on Firefox or IE, or on a Mac device.
There's a lot to be said about font rendering, I suggest reading up on them. This link should get you started: http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
EDIT: As I am now a Mac user, I can't check it but I think this is a webkit issue, so when I say Chrome, I also mean Safari.