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…

Issues

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.

Questions

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?!

Answers

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!

• Probably the best source for “Only the best commercial-use free fonts”: FontSquirrel
• But growing quickly on their heals, is Google Font Directory
• FontSpring offers a small collection of free fonts
• 25 Free Blocky Fonts
• 30 Free “High-Quality” Fonts
• 35 Free “High-Quality” Fonts
• List of free fonts on previous post

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:

• A SitePoint article about building a solid font stack
• A good comparison of which common fonts should be considered “safe” in your font stack
• A serious font matrix…
• The Font Stack Builder helps you determine which fonts you need to get a rock-solid 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:

• Typedia: “Think of it like a mix between IMDb and Wikipedia, but just for type”
• A collection of educational font PDFs from FontShop
• A good article all about fonts from Mark Boulton
• Compare various fonts side-by-side, on-screen at TypeTester
• Font-Stack-Tester scans your page elements, compiles a list of all unique fonts, and offers that list, along with the ability to “Remove” each font, so you can see what your page would look like without it
• FontFriend is a bookmarklet that lets you interact with any page you’re viewing, applying various fonts, including a drag-and-drop feature to try uncommon fonts
• What the Font?: Upload an image of a font you like and What the Font will try to tell you what font it is
• A brief history and state-of-the-union for font from A List Apart
• Create your own fonts, based on scanned images (have not tried this one, so no guarantees on quality…)
• Jonathon Snook offers a couple slick ideas for reducing FOUT and targeting parts of your text with partial font files
• Font file performance issues, according to Steve Souders
• Basic info about fonts, including links to several tutorials

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,
Atg

Top⇪