{"id":1109,"date":"2010-10-06T10:26:58","date_gmt":"2010-10-06T09:26:58","guid":{"rendered":"http:\/\/www.simonbattersby.com\/blog\/?p=1109"},"modified":"2010-10-29T13:31:21","modified_gmt":"2010-10-29T12:31:21","slug":"experiments-with-font-face","status":"publish","type":"post","link":"https:\/\/www.simonbattersby.com\/blog\/2010\/10\/experiments-with-font-face\/","title":{"rendered":"Experiments with @font-face"},"content":{"rendered":"<p>I&#8217;ve previously been a fan of Cufon for rendering web fonts, but this morning I thought I&#8217;d have a play around with @font-face. I tried it, of course, in Firefox first, and it worked. Hurrah. But IE uses its own proprietary font format .eot, created, or so I thought, by Microsoft&#8217;s own product WEFT. I&#8217;d heard the WEFT tool was unpleasant to use, but this still hadn&#8217;t prepared me for the grim reality&#8230;.<\/p>\r\n\r\n<p>However, via this <a href=\"http:\/\/nicewebtype.com\/notes\/2009\/10\/30\/how-to-use-css-font-face\/\" title=\"How to use @font-face\">excellent article<\/a> I found <a href=\"http:\/\/www.fontsquirrel.com\/fontface\/generator\" title=\"Font Squirrel\">Font Squirrel<\/a> which does all the work for you.<\/p> \r\n\r\n<p>Internet Explorer continues to be a pain, however, and applying the necessary css for IE needs some novel css construction &#8211; see the article for details. Having overcome this&#8230;<\/p>\r\n\r\n<p class=\"nasa\">&#8230;you should see this text in a NASA-like font&#8230;<\/p>\r\n\r\n<p>&#8230;unless you&#8217;re viewing in Opera 9, which doesn&#8217;t support @font-face. Otherwise, nice.<\/p>\r\n\r\n<p>EDIT THE NEXT MORNING: After further experimentation I&#8217;m slightly put off by the &#8220;flash of unstyled text&#8221; which is noticeable in Firefox at least. There are some javascript hacks to try and address this, but if I&#8217;ve got to use javascript I think I&#8217;ll stick to Cufon for now.<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve previously been a fan of Cufon for rendering web fonts, but this morning I thought I&#8217;d have a play around with @font-face. I tried it, of course, in Firefox first, and it worked. Hurrah. But IE uses its own proprietary font format .eot, created, or so I thought, by Microsoft&#8217;s own product WEFT. I&#8217;d [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-1109","post","type-post","status-publish","format-standard","hentry","category-web-design-and-build"],"_links":{"self":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/posts\/1109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/comments?post=1109"}],"version-history":[{"count":0,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/posts\/1109\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/media?parent=1109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/categories?post=1109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/tags?post=1109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}