Beyond Arial and Helvetica

Way way back “in the day” I did tech support for Word. I worked for a company here in Massachusetts; we had to pretend we worked for Microsoft. One of the questions we would often get was how to save a document so that when it was emailed to someone, the font information was preserved, even if they didn’t have the font installed. Mind you, TrueType itself was only a few years old at the time. Microsoft and Apple were developing the standard together, believe it or not.

Stay with me; this is going somewhere.

The answer to said font question was simple. Just go to Tools/Options/Save and click “Embed TrueType Fonts.” Licensing issues aside, that was all you had to do to ensure that the file would look (more or less) like it did on your computer.

Well in the web world there was no such functionality. We have been pretty much trapped in a world where we had to design our pages for a common (relatively small) set of so-called web-safe fonts. Arial (Helvetica) and Times New Roman sites abounded (and still do). If you wanted to use non-standard fonts, you had to resort to designing “pictures of words” in Photoshop and sticking them on your page where you wanted the text to go. Looked good but it was terrible for SEO and accessibility.

Later on, technologies like Cufon and sIFR and FLIR came along. But they had their issues, too, and were a major headache to implement. And pretty heavy JavaScripts were involved, too.

Well CSS 3 has a property called @font-face which is designed to get around these thorny issues: no JavaScript. Unfortunately, browser support for font embedding has been spotty. Until recently, that is. Embedding with a TrueType or OpenType font now works with Firefox 3.5+, Safari 3.1+, and Opera 10+. Clearly missing from this lineup is the 800-pound gorilla, Microsoft Internet Explorer. No support for TrueType. In true Microsoft fashion, they stood alone with a new format called EOT. You have to be kidding.

Now I am no developer nor am I a designer. Sadly or not, I went over to the management dark side years ago. I don’t have a lot of time to devote to prettying up my blog. Just when I was about to give up hope and live with Arial forever, I came across this deceptively short post by Paul Irish.

There was a section heading labeled “I’m confused and lazy.”

“Oh, that sounds like me. Well more like ‘impatient’ but let’s see what you’ve got to say.” Down there was a link to the truly incredible Font Squirrel @font-face Generator. I couldn’t believe it. So easy. My jaw literally dropped. Arthur C. Clarke’s third law in action. Magic.

All I had to do was find a licensed font, upload it to the Font Squirrel Generator, click a button, copy and paste a bit of code into my stylesheet, upload the files and Bob’s your uncle, across all modern browsers. I couldn’t believe it. The results were stunning.

I felt I had to pass this on. It was all just too cool. Hence this rather long (for me anyway) post. I hope it does you some good. And in case you are curious, the body text on the site is still good old Arial. Headlines are in League Gothic.