Today I did a bit of web font research to see if we should use Typekit,
@font-face, or another approach for some headings. I found a few links and tips along the way and figured I’d share.
@font-face in Internet Explorer
Internet Explorer, somewhat shockingly, supports
@font-face. I did most of my testing with the Open Type Format (.otf). Microsoft actually developed this with Adobe, yet doesn’t even support it in their
@font-face implementation. Lame, I know. However, they do provide a free tool to convert your .otf fonts into a format Internet Explorer can use.
@font-face in Chrome
Since Google Chrome is essentially WebKit, I was surprised to see that
@font-face isn’t supported. But in a great post by Paul Irish called Bulletproof @font-face syntax, I saw that Chrome will work with an SVG implementation. I didn’t try it, but it sure sounds cool.
There are a lot of web fonts out there
Font Squirrel has released hundreds of
@font-face kits for free download. These kits include four font formats (making them compatible in Internet Explorer and Chrome) and the HTML and CSS to drop into your web site. Easy, breezy, beautiful web fonts. Well, except for the many, many ugly fonts on that page…
Typekit flashes the fallback fonts briefly while your pretty fonts download
Have you played with web fonts? Anything you ran into you’d like to share?