Embedding Fonts in Web Pages

November 17, 2003 - 2:00am ||| 0 Comments | Add new

Vexed with Verdana? Tired with Trebuchet? To hell with Helvetica? (One more: Arial gives you angst?) The meager standard font choices for web designers can get tiring. Of course, you can call for any font you'd like in your web pages, but if the user doesn't happen to have that same exact font active on their machine, your web page will appear in the default font per their browser settings — typically, Times.

Web designers working on Windows machines (all web designers should have access to a Windows machine, if only for browser testing, actually) have the ability to embed non-standard fonts in web pages with Microsoft's Web Embedding Fonts Tool (WEFT), a free download:

This utility lets you create an Embedded Open Type (EOT) version of each font you call for in your web site's Cascading Style Sheets (assuming the font's designer allowed embedding). By uploading those EOT files to your server — each is typically 1 or 2K, quite small — and adding a few lines of extra CSS to your site, you can create web pages formatted in the font you want, even if the site visitor doesn't have that font loaded.

And I'm not talking just about using Garamond or Futura, though of course it's refreshingly liberating to be able to do that. But what about being able to extend a client's Corporate ID standards to their web site? Or set up a site in foreign language? Thousands of people use the WEFT/EOT solution to set up web pages in languages that use a non-Roman font, such as Hindi and Khmer. Check out the WEFT-using community at their busy on-line forum:

The hitch: Without any extra software, only site visitors using Windows Internet Explorer 4.x or above will see your pages in that font; everyone else gets the pages in their browser's default font. (Hey, I said this was a Microsoft utility, didn't I?) Still, since the overwhelming majority of Internet users are using Windows IE 4.X and above to view your site (check out your server logs), it's something to consider.

But you can get around the hitch: To make your EOT-based site appear as designed to users on Macs or who use Netscape or another browser, check out GlyphGate from em2 Solutions, a company based in Stockholm, Sweden:

It's a web server extension (works with Microsoft, Linux, and Mac web servers) that can detect non-IE/Windows visitors and enable them to see the pages with the embedded fonts. Using IE 5.2 in OS X, I was able to see demo pages that used non-standard display and body fonts to format live text. From the source code it appears the EOT fonts were derived from Ancient Script and ITC Franklin Gothic. Very cool!


Post new comment

The content of this field is kept private and will not be shown publicly.
By submitting this form, you accept the Mollom privacy policy.