Fonts, Fonts, Everywhere, But Not a Font in Use…

Okay, brief Iron Maiden reference out of the way, now to the action…

I personally think 2010 will go down in history as the birth of the web fonts (even though the real birth was 1997, when IE4 came out).  Most likely 2011 or 2012 will really be remembered as the birth of web fonts, but those of us that were here will know the real-deal…

Between the emergence of such services as FontDeck, FontSpring, FontSquirrel, Typekit (which now offers several Adobe fonts!), Typotheque, WebType, and even Google Font Directory (this list was a LOT longer, but if the “font” service is using something like images or Flash to display your font, I cut them), and such font pioneering movements as the Bulletproof @font-face and the Mo’ Bulletproofer @Font-Face, we have finally been freed from such methods as background image replacements, Cufón and SiFR to serve new and innovative fonts to our website users.  Yes, 2010 has certainly seen tremendous progress in the world of web fonts.

So, with all of this movement, why do we still see lame (read: typical) fonts and graphic headers all over the place?  Well, it’s because the web isn’t a perfect place, and there are lots, and lots of questions still lingering out there…


Browsers implement web fonts differently from one another.  Some hide the text completely until the font file arrives then displays the styled text, others show the text in the next-highest font in the stack that is available until the font file arrives, then blinks into action (affectionately known as FOUT)…

The fonts you have to choose from used to be really horrible.  There were very few good fonts, which were expensive, and a ton of crappy fonts, which were usually free.  Recently that’s been changing (with all the font services listed above and more), but now you usually have to serve your font through the service, and some times via JavaScript.


So, can I avoid the blink, or what?  Where can I find reliable, legal fonts?  What if I don’t want to rely on some one else’s server and/or JavaScript to implement fonts?  Web fonts are really expensive aren’t they?  What happens if my font file never arrives?

Well, they’re all pretty valid comments, questions and concerns, especially if you’re running a commercial website.  Hobby sites (like the one you’re reading) don’t have to worry about how they look, in theory you’re here for the content.  But commercial sites have money on the line: either they’re selling a product or they have advertisers, and either way, they want to look consistent and professional.

So, what are the answers to these questions, and how do I go about fonting now?!


First of all, the blink…  I personally hate Firefox’s font implementation (the biggest FOUT offender).  I would rather see nothing while the browser tries to get my font file, and should only see the next font in my stack if the first one isn’t available (you know, the way font stacks are supposed to work).  But hey, that’s me, and if I really want to bitch, I should build my own browser.  In the mean time, we’re sort of stuck with it.

The best approach to fighting FOUT is to follow Paul Irish’s guidance, and put a lot of energy into building your font stack so there is a relatively not-gross common font next in line.  The biggest issue with FOUT is really the page content jumping around when the web font is finally available, so, look for a font that renders at relatively the same size, not necessarily the same look (if there was a common font that looked the same, we wouldn’t really need the web font, now would we?).

The next few issues can all be addressed at once: finding reliable, legal fonts; serving web fonts; and the cost of doing business.  First of all, there are TONS of reliable, legal fonts on the web now.  Just try scrolling through any of the above services and you’ll see more fonts than you could possibly stuff into all the websites you work on.  However, most people look at those fonts, then slooowwwllllyyy turn their eyes to the cost and…

While all of the services give you previews of the fonts, some use images or limit the text you can preview (quick brown fox, anyone?)… A cool tool to check-out what your site will look like with a particular font, prior to purchasing, is FontFonter.  Just enter the URL of your site, and pick a font.

No matter how small the cost, there is just something about having to pay for something on the web that is grating…  I know, I feel it too.  But what to do?  Well, there ARE a ton of free web fonts that can help take you and your sites far beyond the world of Helvetica, Arial, Georgia, Lucida, and Times…  Buckle up and pack a sandwich, it’s going to be a serious ride…

Yes, some are crap, but some are actually pretty cool!

The biggest concern with free fonts is quality, so be sure to thoroughly test any font for any character you might want to use (including special characters, I’ve used fonts that had several characters that were just missing…).

Finally, what to do if your font file never arrives?  Well, that’s life, and you have to plan accordingly.  This takes us back to a proper font stack.  Here are a few resources on constructing a proper font stack:

So, there it is.  Enough stuff about fonts?  Make you want to dig right in, or dig a hole and climb in it?  Hopefully the former.  Fonts can be scary, something being out of your control, but for just a dab of “something different”, not much can beat a nice, new, unfamiliar font face here and there.

If you’d like to learn more about fonts, here are a few choice resources:

If you have any fonts that you really love, or just links or notes about fonts that you’d like to share, tell us about it!

Happy fontificating,

2 Responses to Fonts, Fonts, Everywhere, But Not a Font in Use…

  1. aarontgrogg says:

    Another list of fonts from Smashing Magazine, some pretty good looking!

    Now get to fonting!


  2. Thanks to Paul at Art of Blog for reporting the broken Google Fonts link!

    He also recommended an article on picking fonts and sizes for body content. Nice, short, easy read!


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.