{"id":237,"date":"2009-10-09T20:53:36","date_gmt":"2009-10-10T00:53:36","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=237"},"modified":"2011-05-14T00:51:29","modified_gmt":"2011-05-14T04:51:29","slug":"more-font-face-fun","status":"publish","type":"post","link":"http:\/\/www.useragentman.com\/blog\/2009\/10\/09\/more-font-face-fun\/","title":{"rendered":"More @font-face fun"},"content":{"rendered":"

My first post @font-face in Depth<\/a> got a huge<\/strong> amount of unexpected attention.\u00a0 Thank you all for your comments and criticism.\u00a0 Since the post, there have been quite a bit of information I have read about and thought I should share.<\/p>\n

SVG fonts for Opera and Chrome<\/h2>\n

Jonathan Snook<\/a> wrote a great article regarding Opera 10 and Google Chrome supporting SVG fonts<\/a> (Chrome can load them without any pesky command line switch!).\u00a0 He mentions how to convert TrueType fonts to this format using Batik<\/a>, and that by removing all the <hkren><\/code> elements inside the file’s XML can make the font smaller than the original TrueType file.\u00a0 Too bad the browsers don’t support this format.<\/p>\n

Opera’s buggy implementation<\/h2>\n

I noticed after I launched my first @font-face article that Opera was not loading the fonts on my blog when users visited more than one page. It turns out that Opera 10’s implementation of @font-face is a little buggy. When you feed it a page with an embedded font, you may not see the embedded fonts properly, like in the screenshot below:<\/p>\n

\"screenshotOpera\"<\/a>

Opera sometimes doesn't load the font at all, and removes other styling (click to enlarge).<\/p><\/div><\/p>\n

According to Opera<\/a>, this happens when “specifying different weights and styles for a single font-family name”. H\u00e5kon Wium Lie, the company’s Chief Technology Officer , has described a work-around<\/a> until the company can fix the problem properly.<\/p>\n

I am debating whether to implement the work around on my site, or to wait for Opera to fix the problem and patch all Opera 10 installations via auto-update (I’m leaning towards the latter).<\/p>\n

Performance Issues With Font Embedding<\/h2>\n

One of the comments on the last article came from Steve Souders<\/a> who had performance concerns with font-embedding<\/a>. Paul Irish came back with information showing the when browsers load the fonts, and what they do before the font is loaded<\/a>.\u00a0 He also shows how to use JavaScript to make the loading behaviour consistent between browsers.<\/p>\n

The performance issues with font-embedding is something I am going to be keeping an eye on, especially when it comes to font-services, which the OpenType site believes will be the future of web font distribution for commercial fonts<\/a>. Although it doesn’t seem like much of an issue currently (my blog seems<\/em> to load quickly), I don’t want to do anything that would slow down my web applications – especially if I am using them just to make the text look a little prettier.<\/p>\n

Windows XP Rendering Issues<\/h2>\n

Boing-Boing had a bad experience with font-embedding. Turns out they got a lot of complaints when they decided to incorporate it into their website<\/a>. The reason: some users didn’t have ClearType turned on, and the font Boing-Boing chose looked “like ass” without ClearType.<\/p>\n

Below are screenshots of this site without ClearType on:<\/p>\n

\"ieNoAA\"

Internet Explorer without ClearType<\/p><\/div><\/p>\n

\n

\"Firefox

Firefox without ClearType<\/p><\/div><\/p>\n

The article stated that there are quite a few XP computers which apparently don’t have ClearType on by default. I wonder if there are any stats to back that up. If so, then developers embed fonts into pages should test that scenario as well. It does look different.<\/p>\n","protected":false},"excerpt":{"rendered":"

My first post @font-face in Depth got a huge amount of unexpected attention.\u00a0 Thank you all for your comments and criticism.\u00a0 Since the post, there have been quite a bit of information I have read about and thought I should share. SVG fonts for Opera and Chrome Jonathan Snook wrote a great article regarding Opera […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,9,10,13],"tags":[27,29,30,28],"class_list":["post-237","post","type-post","status-publish","format-standard","hentry","category-font-face","category-css","category-fonts","category-svg","tag-font-face-opera-chrome","tag-anti-aliasing","tag-cleartype","tag-svg-fonts"],"_links":{"self":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/comments?post=237"}],"version-history":[{"count":23,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/237\/revisions"}],"predecessor-version":[{"id":3289,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/237\/revisions\/3289"}],"wp:attachment":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/media?parent=237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/categories?post=237"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/tags?post=237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}