Some Things I Discovered Today While Investigating Web Fonts
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
Not really Typekit’s fault, but as the Javascript loads your custom fonts, your users will briefly see the fallback fonts (the fonts you told Typekit to use in the event that the user’s browser doesn’t support Typekit). In some cases, this could actually cause new linebreaks and other jarring shifts. Usually it won’t be anything serious, but it will likely be noticable. Kind of a bummer. Looks like they’re working on a solution, though.
Have you played with web fonts? Anything you ran into you’d like to share?