{"id":468,"date":"2014-03-12T13:02:34","date_gmt":"2014-03-12T12:02:34","guid":{"rendered":"http:\/\/hesmid.nl\/test\/?p=468"},"modified":"2014-03-13T10:52:04","modified_gmt":"2014-03-13T09:52:04","slug":"smoother-rendering-of-fonts-in-chrome","status":"publish","type":"post","link":"https:\/\/hesmid.nl\/test\/smoother-rendering-of-fonts-in-chrome\/","title":{"rendered":"Smoother rendering of fonts in Chrome"},"content":{"rendered":"<p>If your web font is not rendered nicely on Chrome, try this:<\/p>\n<p>SOURCE:\u00a0<a href=\"http:\/\/www.fontspring.com\/blog\/smoother-rendering-in-chrome-update\">http:\/\/www.fontspring.com\/blog\/smoother-rendering-in-chrome-update<\/a><\/p>\n<h3>The Issue:<\/h3>\n<p>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.<\/p>\n<p><!--more--><\/p>\n<p><strong>Default Fontspring Bullet-proof syntax:<\/strong><\/p>\n<pre lang=\"css\">@font-face {\r\n  font-family: 'MyWebFont';\r\n  src: url('webfont.eot');\r\n  src: url('webfont.eot?#iefix') format('embedded-opentype'),\r\n    url('webfont.woff') format('woff'),\r\n    url('webfont.ttf')\u00a0 format('truetype'),\r\n    url('webfont.svg#svgFontName') format('svg');\r\n}<\/pre>\n<p><strong>Addition Media Query Targeting Chrome:<\/strong><\/p>\n<pre lang=\"css\">@media screen and (-webkit-min-device-pixel-ratio:0) {\r\n  @font-face {\r\n    font-family: 'MyWebFont';\r\n    src: url('webfont.svg#svgFontName') format('svg');\r\n  }\r\n}<\/pre>\n<h3>Another Tradeoff:<\/h3>\n<p>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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If your web font is not rendered nicely on Chrome, try this: SOURCE:\u00a0http:\/\/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.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/468"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=468"}],"version-history":[{"count":5,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/468\/revisions"}],"predecessor-version":[{"id":476,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/468\/revisions\/476"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=468"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}