Smoother Rendering in Chrome (update)
Apparently with this cat, there is a better way to skin it.
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.