BLOG

Sometimes nerdy and wordy, but mostly helpful articles on website design and development.

Better font rendering in Google Chrome for Windows

| 2 Comments | Web Development

When it comes to using non-standard web fonts, Chrome (on Windows) has given less than great results. The issue is that Chrome cannot do anti-aliasing on TrueType fonts. There seem to several CSS hacks that try to fix the issue in Chrome, but they are not very reliable.

When using the @font-face approach via CSS, we specific 4 different versions of the font file for the different modern browsers. To target each of these major browsers we embed these font files in our CSS.

From the list above you see that Chrome supports WOFF, SVG and TTF. Chrome renders SVG fonts the best so what we can do is simply put our SVG font embed above the call for the WOFF.

@font-face {
font-family:'Font-Name';
src:url('fonts/font-name.eot');
src:url('fonts/font-name.eot?#iefix') format('embedded-opentype'),
url('fonts/font-name.svg#gotham-bold') format('svg'),
url('fonts/font-name.woff') format('woff'),
url('fonts/font-name.ttf') format('truetype');
font-weight:normal;
font-style:normal;
}

The Catch

Yes, there is a small catch with this.

  • Safari now downloads both the SVG and the WOFF, which causes one extra hit.
  • The SVG font files are typically larger than the other formats.

It’s only a matter of time before Chrome improves their font rendering for Windows. When they do, you’ll want to revert back to the normal way of listing the SVG font last.

Screenshot

As you can see, on the smaller font sizes the WOFF is just awful at rendering.

svg-woff-font-file-screenshots

2 responses to “Better font rendering in Google Chrome for Windows

Leave a Reply

Your email address will not be published. Required fields are marked *

Get the Latest

  • Get email updates whenever we post new blog articles.
  • This field is for validation purposes and should be left unchanged.

Recent Articles