At a small tech gathering recently in Boston, font guru Paul Irish illustrated how the web is finally ready for a richer web fonts experience. For some time now, designers and developers have been stuck with only a handful of default “web friendly” fonts: Helvetica, Arial, Times, Courier, Georgia, among others. While a variety of techniques have cropped up over the years to satisfy the need for other fonts (such tools have included sifR, typeface.js, Cufón, and even text-to-image replacers), not all browsers incorporated native techniques for embedding unique fonts. This has been a source of frustration for designers trying to break out of the mold and do more sophisticated and exciting work, as alternative tools all have had implementation hazards and limitations of one kind or another.
This is all changing, as technology is crossing the threshold toward a brighter web fonts horizon. This isn’t to say the way ahead isn’t void of other challenges, particularly as concerns licensing. Rather, many of the key pieces are set to do the most basic of things: embed fonts natively into the browser with stunning visual results. So how is this possible (and why was it not really feasible earlier)?
The first place to look is at cross-browser implementation/support. Atypically, Internet Explorer is actually years ahead in the charge. They’ve allowed font embedding since IE4, where most of the other browsers have taken a while to catch up. (Though Opera actually introduced the spec.) From figures taken from StatCounter.com‘s global stats website, 95% of the major browsers have native font embedding capabilities — that missing 5% being Firefox 3.0. (All other browsers support: IE6+, FF3.5+, Safari 3+, Chrome, and Opera.)
Actual implementation is a little trickier, but there are tools and font resources to help ease the pain. I won’t get into all of the ins and outs, as it’s already been covered elsewhere, but the main format is pretty straightforward. (For the full presentation see http://paulirish.com/squeeze/. Also, visit some of the links at the end of this post for additional resources.) After several configuration tests, Irish deciphered a workable cross-browser CSS implementation (also posted at http://css3please.com/), represented here in all its glory:
@font-face {
font-family: ‘WebFont’;
src: url(‘myfont.eot’); /* IE6+ */
src: local(‘☺’),
url(‘myfont.woff’) format(‘woff’), /* FF3.6 */
url(‘myfont.ttf’) format(‘truetype’); /* Saf3+,Chrome,FF3.5,Opera10+ */
}
You’ll note the interesting smiley character “☺” in the source. This is actually no mistake, but purposefully placed there to trick IE into not downloading unnecessary cruft WOFF or TrueType files that it then won’t know what to do with. Hopefully the rest is self explanatory.
Again, there are several other technical considerations to take into account (including font obfuscation and protection techniques), but resources such as Font Squirrel’s @font-face generator and the forthcoming open web foundry Font Deck are geared to help ease the pain. Also boutiques, such as FontSpring, have fonts that can be purchased for commercial use from anywhere between $15-50. (FontSpring also will show you what the font looks like at a glance in your browser at different sizes.) So there are plenty of cheap and free options available.
This leaves us with the 800-pound gorilla in the room: licensing for unpaid fonts. While licensing has historically been a very tricky issue on this front, its becoming easier to navigate as more and more players come to the table. Contrary to popular belief, reading the fine print on the end user license agreement can actually prove fruitful as many licenses these days have clauses purposefully written into them explicitly allowing embedded use. Knowing what to look for and and what usages are allowed might take practice, but you’ll only need to do it once per font, and as a wise friend once told me, knowing is half the battle.
Relevant and related resources:
Font-related humor:
Back to top
