Joy Of Code - Web Design Training and Consulting
Joy Gems Newsletter

Downloadable Web Fonts: Not Ready For Prime Time

Share

By Bud Kraus
bud@joyofcode.com
Joy Of Code
Creator And Instructor

v5 i12
Originally Published: September 10, 2009

Somehow I got distracted this summer (what summer?) and ended up taking a long look at downloadable fonts. What's that, you ask?

It's been the eternal curse of many a web page designer that the choice of fonts is limited to what is available on the user's system. Compare the rich selection of fonts used in elegant magazine typography to the selection

(The fact that we are limited to a relatively small choice of fonts to work with just might be a good thing, but that's the subject of another Joy Gems).

Cascading Style Sheets allows for the importing of fonts to web documents. That's the idea, any way. However, after much searching and testing I can report that downloadable web fonts are more pipe dream than reality. Will it happen one day? I'll get to that in a minute.

Here's the idea. Say you have a font you'd like to use for a web page. Let's say it's a True Type Font called "wacky.ttf."

To use the wacky.ttf, you'd need some CSS code which goes like this:

<style type="text/css">

@font-face {
font-family: wacky;
src: url(http://www.joyofcode.com/fonts/wacky.ttf);}

p
{font-family: wacky, arial,helvetica,sans-serif;}

</style>

How cool is this? The fictitious wacky.ttf font is stored on my server at http://www.joyofcode.com/fonts/wacky.ttf. It's downloaded to the user as the web page is downloaded.

But the problem is that browser support for this CSS technique is still weak. I read that non-Internet Explorer browsers do a reasonable job honoring a downloaded font, BUT I didn't find that to be the case at all. I tested the most up to date versions of Safari and Firefox (Mac and Win) and the results were disappointing.

Still, I am optimistic that the era of the downloadable font is just over the horizon. There's a good deal of web designer community pressure on browser developers to properly implement already existing CSS specifications such as the @font-face shown above.

Here are some of the articles I read on how downloadable fonts work - or should work.

I don't want my MTV anymore. I want downloadable fonts!!