Font Antialiasing in Windows

Update: Chrome was updated (in version 37) to use DirectWrite for its font rendering which solved the antialiasing problem.

The Windows version of Chrome doesn’t have the best font rendering. The result looks pixelated and it has no antialiasing. One solution to this problem is prioritizing the loading of SVG fonts over the other formats (in your @font-face in CSS). I wrote about this technique a long time ago and I have been using it in IcoMoon, too.

SVG fonts lack compression and therefore they are very larger in size compared to other font formats. But I think this larger size is worth getting rid of the pixelated font rendering in Windows. (SVG fonts also render slightly better in other operating systems.)

Unfortunately, there is a strange bug (Issue 95102) in the Windows version of Chrome that randomly occurs and causes unwanted results and layout breaks. This bug happens very randomly and therefore it is hard to reproduce. According to some of IcoMoon users, this problem goes away when they use the PUA encoding; but due to the random nature of this bug, I can’t confidently guarantee that using PUA encodings completely solves the problem. Therefore, I had to change IcoMoon’s default CSS to prioritize WOFF fonts over SVGs. But if you really care about the Windows version of Chrome, and if you’d like to get smooth and antialiased results, there is still one more workaround (taken from this stackoverflow answer) which you can safely use. In addition to your original @font-face (with the WOFF font on top), use the following:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.svg#icomoon') format('svg');
  }
}

In the code above, you will need to replace “icomoon” with your own font’s name/ID.

If you have any thoughts on this, you can let me know via twitter @keyamoon.