Question

When using Google Web Fonts on Chrome under windows 7, the fonts seem to render incorrectly, while on a Mac OSX (on Chrome, Safari and Firefox) it looks fine. Is there a way to prevent this via CSS or HTML?

The site introducing this behavior can be found here (it might take a while until it loads).

Here’s a snapshot showing this:

Answer 1

Alright so this has to do with the way Chrome renders fonts in windows. There is a tool you can use called MacType which changes the rendering engine that windows uses to render fonts.

You can download it here: https://code.google.com/p/mactype/

From everything that i have researched, with google web fonts on windows there currently does not exist a way to fix this issue.

Its simply by design how it works.

You can follow the issue on Chromiums Google Code site..
https://code.google.com/p/chromium/issues/detail?id=137692

heres a snip from the above link that goes in to more detail

As I understand it: the main problem is the fact that Chrome continues
to use the old Windows GDI for rendering fonts, and it looks poor. All
other modern browsers (except Opera) have switched to using
DirectWrite on Windows, resulting in much better font rendering,
leaving Chrome lagging.

If you look back at older versions of IE and Firefox you’ll see their
font rendering a few years ago looked exactly the same as Chrome’s
does today on Windows. People just didn’t notice as much back then as
nobody was using web fonts; when you’re using Arial, Verdana etc they
look OK because those fonts have been carefully designed and hinted to
work well with the GDI engine. Most web fonts have not.

for developers, one work around is to put SVG first, doubt this is proper though

-before--------------

@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}


-after--------------

@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.svg') format('svg'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}