Chrome .svg Font Rendering Issue Fix

At last, the heisenbug has been fixed!

If you've ever generated @font-face code from Font Squirrel, you may have noticed the fonts look woeful in Chrome on Windows.

This is because of the order the fonts are output. The .woff file is before the .svg file, and so Google uses the .woff version of the font.

Simply moving the .svg file up to the top – but below the .eot, so IE doesn't have a fit – smooths out the font, but then you have another problem.

.svg font in Chrome rendering incorrectly

For some reason, the font intermittently fails to render correctly, losing its width.

The issue comes and goes; I've worked on a site for a few weeks and not seen it, then it'll appear for a few hours, then it won't be seen again for another few days.

Well, a solution has been found on StackOverflow!

Instead of rearranging the font order, add in a media query specifically targetting Webkit browsers by using a pixel density "hack":

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

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

I'm not 100% sure how or why this solves the issue, so if anyone does please let me know! For now, I see no drawbacks in using it; everything seems as normal in all major browsers.

So, if you want smooth fonts in Chrome on Windows, implement the hack above, and then head to StackOverflow and give Quka some rep!

Want to let me know what you think of Chrome .svg Font Rendering Issue Fix? Why not leave a comment, follow me on Twitter , or !

Comments

comments powered by Disqus