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?

3 Comments

  1. On December 28th, 2009 at 4:37 pm Sara Streeter said:

    Your post has been starred in GReader – thank you for the useful type tip :-)

  2. On January 3rd, 2010 at 9:13 am Paul Irish said:

    Hey Adam..

    Here’s a bit more detail on Chrome and @font-face:
    http://paulirish.com/2009/chrome-and-font-face-a-summary/

    And more detail on the fallback font behavior:
    http://paulirish.com/2009/fighting-the-font-face-fout/

    And using the font squirrel generator also makes the SVG for you to support Chrome 3 stable:
    http://www.fontsquirrel.com/fontface/generator

    Cheers

  3. On January 3rd, 2010 at 9:58 am Adam Darowski said:

    Thanks for the links, Paul! Yes… though it was pretty cool that FontSquirrel will even handle the SVG for you. Smooth!