ARCHIVES

Web Page Font Embedding with WEFT

Using Microsoft’s WEFT program to produce embedabble fonts for your web project seems at first quite … well, weird. Here are some tips to help you get web-ready fonts more quickly.

Ok guys, here’s the deal: If you want to embed fonts into your web pages, you have to use Microsoft’s WEFT application. Period. Like it or not, you are stuck with this antiquated piece of software from the 1700s to produce your much-desired eot files that mother W3C has been telling you about.

Actually, she’s been telling you about a few other font formats you could also theoretically use. But those are nowhere to be found. So, embedded open type it is. Let’s make the best of it.

When you first fire up WEFT, you are greeted by one of Microsoft’s nifty little Wizards that guide you through the entire font embedding process. Do what you always do when you encounter one of those friendly little helpers: Close it. Now, let’s get some work done.

First of all: Mind, that you can’t simply take a TrueType or Type1 font and run it through the WEFT converter. At least that’s what the wizard wants to make you believe. Luckily, we closed him a long time ago, along with all the other project, analyses and log windows that WEFT offers. We’re after the good stuff. And that’s hidden in “Tools ->Expert Create Fonts”.

Now, you must know that before you can convert a font to .eot format, you must first have it installed. So, first, do that. Truetype and Type1 will work. OpenType (.otf) won’t. Then, open the “Expert create font” menu and follow your intuition. That means, choose a font to be converted and choose a subset of characters (which comes in handy if you need only a handful of glyphs and want to save bandwidth).

Then follows an important step. You’ll need to bind this font to a specific web root address under which it will only work. I used http://www.brandorphin.com to make my fonts work for the entire Capital Morgenpost. Click “Create Fonts” (or so, I forget what it’s called) to write the .eot file to the specified location, and you are done.

Finally, upload the .eot file to your web server and reference it in your style sheet like so:

@font-face { font-family: "phantasyfontname";
src: url("fontfilename.eot");
}

You can now use the new font by calling it with “phantasyfontname” in your classes. It doesn’t matter what the factory name of the font is, by the way. Whatever you define in font-family becomes the new name of the thing.

Go here to see an example. If your browser understands font-embedding, you will see the font “Critter” (featuring little animal letters), otherwise a dull monospace font will wait for you. Of course, this works only with Internet Explorer on Windows, if I’m not mistaken.

What is this whole thing good for then, you ask? Beats me. But it is in the CSS2 specs. So, in theory, you should know how to use it.

Posted by Chefredaktion at March 22, 2005 10:30 PM