Search code examples
google-chromewindows-7webfonts

Flawed rendering of web fonts on Chrome under Windows 7

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:

font aliasing issue

Solution

  • 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;
}