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.