{"id":172,"date":"2009-06-01T15:12:55","date_gmt":"2009-06-01T20:12:55","guid":{"rendered":"http:\/\/cdf-design.com\/blog\/?p=172"},"modified":"2009-06-26T09:52:44","modified_gmt":"2009-06-26T14:52:44","slug":"experiments-with-web-fonts","status":"publish","type":"post","link":"https:\/\/cdf-design.com\/blog\/2009\/06\/experiments-with-web-fonts\/","title":{"rendered":"Experiments with Web Fonts @font-face"},"content":{"rendered":"<p>I&#8217;ve been reading a lot lately about Web Fonts (@font-face) and how it&#8217;s been included in CSS3. Now Safari is currently the only non-beta version browser to fully support this functionality. There&#8217;s been much written about the impact this will have on web design, but I haven&#8217;t seen any examples of it in use or really any experimentation with this functionality. Late last week I decided to play around with Web Fonts.<br \/>\n<!--more--><br \/>\nAt first I wanted to try combining @font-face and Microsoft&#8217;s .EOT Font Embedding spec for good old Internet Explorer. @font-face seemed like it was going to be easy enough to implement because it&#8217;s just a new style command, .EOT would be another option so I did that last. Sure enough I was write about @font-face I got the below experiment working in 15 minutes, and learned a lot about it by comparing results in my different browsers.<\/p>\n<p>.EOT was a different story, I had to do more research on how to get it working and now that I have I think I&#8217;m not going to bother. Everyone should just ditch Internet Explorer and let&#8217;s be done with it OK? Here feel free to figure out .EOT for yourself: <a href=\"http:\/\/www.w3.org\/Submission\/2008\/01\/\" target=\"_blank\">http:\/\/www.w3.org\/Submission\/2008\/01\/<\/a><\/p>\n<p>Below is an HTML document that I&#8217;ve iframed into this blog because the code itself was having issues with WordPress. You can read what I&#8217;ve learned after this example.<br \/>\n<iframe loading=\"lazy\" src=\"http:\/\/cdf-design.com\/web-fonts.html\" scrolling=\"no\" height=\"700\" width=\"450\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" name=\"webfonts\" title=\"\" vspace=\"0\" > <\/iframe><\/p>\n<h2>What I learned<\/h2>\n<ul>\n<li>\u2022 It appears that System Fonts over ride Web Fonts. If you have a font named the same as your Web Font the System Font is used.<\/li>\n<li><\/li>\n<li>\u2022 Safari does a good job of cacheing the Web Font, but you do notice a pause and then a flash when rendering the font for the first time.<\/li>\n<\/ul>\n<p>&nbsp; <\/p>\n<p>&nbsp; <\/p>\n<p><ins><b>Update 6\/26\/09: If you are really interested in the Microsoft .EOT Font Face support <a href=\"http:\/\/jontangerine.com\/log\/2008\/10\/font-face-in-ie-making-web-fonts-work\">read this great article<\/a>. <\/b><\/ins><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve been reading a lot lately about Web Fonts (@font-face) and how it&#8217;s been included in CSS3. Now Safari is currently the only non-beta version browser to fully support this functionality. There&#8217;s been much written about the impact this will have on web design, but I haven&#8217;t seen any examples of it in use or [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-172","post","type-post","status-publish","format-standard","hentry","category-design"],"_links":{"self":[{"href":"https:\/\/cdf-design.com\/blog\/wp-json\/wp\/v2\/posts\/172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cdf-design.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cdf-design.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cdf-design.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cdf-design.com\/blog\/wp-json\/wp\/v2\/comments?post=172"}],"version-history":[{"count":13,"href":"https:\/\/cdf-design.com\/blog\/wp-json\/wp\/v2\/posts\/172\/revisions"}],"predecessor-version":[{"id":178,"href":"https:\/\/cdf-design.com\/blog\/wp-json\/wp\/v2\/posts\/172\/revisions\/178"}],"wp:attachment":[{"href":"https:\/\/cdf-design.com\/blog\/wp-json\/wp\/v2\/media?parent=172"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cdf-design.com\/blog\/wp-json\/wp\/v2\/categories?post=172"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cdf-design.com\/blog\/wp-json\/wp\/v2\/tags?post=172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}