Smoother rendering of fonts in Chrome

If your web font is not rendered nicely on Chrome, try this:

SOURCE: http://www.fontspring.com/blog/smoother-rendering-in-chrome-update

The Issue:

Some websites may experience intermittent spacing issues when rendering the svg. If you call the svg with a media query specific to Chrome, the spacing issues disappear. See the example below.

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.