I’ve been reading a lot lately about Web Fonts (@font-face) and how it’s been included in CSS3. Now Safari is currently the only non-beta version browser to fully support this functionality. There’s been much written about the impact this will have on web design, but I haven’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.

At first I wanted to try combining @font-face and Microsoft’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’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.

.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’m not going to bother. Everyone should just ditch Internet Explorer and let’s be done with it OK? Here feel free to figure out .EOT for yourself: http://www.w3.org/Submission/2008/01/

Below is an HTML document that I’ve iframed into this blog because the code itself was having issues with WordPress. You can read what I’ve learned after this example.

What I learned

• • 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.
• • 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.

Update 6/26/09: If you are really interested in the Microsoft .EOT Font Face support read this great article.

This entry was posted on Monday, June 1st, 2009 at 3:12 pm and is filed under Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.