@font-face: the good news and the bad news

We can now use custom fonts in our CSS in every major browser, including IE 6, with very little effort.* This is very exciting, and it seems very powerful, but we don’t see custom fonts all over the web. Why not? I’m going to try to explain this as simply as possible.

One reason is that font files are big – sizes very widely but they can easily be 1.5M – and gzipping won’t save much more than 50%. A font will take a while to load into your browser – custom fonts are not free. The side effect of using a font file is different on different browsers. From memory, my impression is that Safari shows no text until the font is loaded and Firefox shows you FOUT (Flash Of Unstyled Text). Neither behavior is desirable.

Another is the licensing issue. How can I legally use Helvetica Neue® in my web application? That’s a topic of it’s own, but if you were planning on using Gotham Medium headings because your web designer heard about @font-face, just forget about it.

On the bright side, Google Web Fonts alleviates both font size and licensing issues by hosting a library of well-compressed Open Source fonts. Phew! Now it’s again very exciting (although less so, because it’s not all fonts) and powerful (but fonts are still heavy and need to be downloaded by browsers). But to that point, other web sites may use the same Google-hosted web fonts you do, and those fonts may be cached by your user’s browser. Now are they free? Hm. Maybe.

I thought perhaps I could relax about custom fonts at this point, but I ran into an issue with Safari. The Google Web Fonts I included simply didn’t work in Safari (for both Windows and Mac, I think), although we are told Safari is supported. Maybe the issue has been fixed, but it made me lose some faith – do I want to be at Google’s mercy for hosting these fonts and ensuring they work in all browsers?

I decided to be untrusting and conservative, and instead considered providing my own font files. I thought about how fonts do not have to be large – some have less information, fewer characters…  I looked for and found some light and license-free fonts, and here I share my bounty with you:

Font Squirrel (the ones that don’t say “offsite” download for free)
10 Great Free Fonts for @font-face embedding
104 Free Fonts for Web Designers and Logo Artists

Don’t forget to gzip your fonts.

*IE simply requires an extra css declaration.