Smoother Rendering in Chrome (update)

Last year we shared an alternative @font-face syntax that offers rendering benefits in Chrome for Windows by serving the svg file to Chrome users. You can read the original post here: smoother-web-font-rendering-chrome. Since then, we have discovered a couple intermittent issues that only affect a handful of users. We also discovered some methods to work around them.

The Issue:

Some websites may experience intermittent spacing issues when rendering the svg. You know what they say: “There’s more than one way to skin a cat”, (Though I’m not sure why you would want to). Apparently with this cat, there is a better way to skin it*. Instead of modifying the default syntax as we suggested in our first post, if you call the svg with a media query specific to Chrome, the spacing issues disappear. See the example below and check out our updated demo.

Default Fontspring Bullet-proof syntax:

 @font-face {
    font-family: ‘MyWebFont’;
    src: url(‘webfont.eot’);
    src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
         url(‘webfont.woff’) format(‘woff’),
         url(‘webfont.ttf’) format(‘truetype’),
         url(‘webfont.svg#svgFontName’) format(‘svg’);
 }

Addition Media Query Targeting Chrome:

 @media screen and (-webkit-min-device-pixel-ratio:0) {
 @font-face {
   font-family: ‘MyWebFont’;
   src: url(‘webfont.svg#svgFontName’) format(‘svg’);
 }
 }

Another Tradeoff:

We have also found native browser elements, such as selects, will not properly render the svg webfont while they render woff files just fine. This is easily resolved by using a web-safe font to style the form elements or use the default Fontspring bullet-proof syntax.

*Disclaimer: No cats were harmed in the writing of this blog.