Embedding Fonts

At times you may want to use fonts other than the likes of Arial, Verdana, Times New Roman, and other mainstream fonts installed on most computers today. To implement special fonts on a web page, your choices are to either use high bandwidth-consuming images or embed the fonts. Embedding fonts is a very efficient and easy process, however support for doing so is still not as widespread as we would like. Right now, embedding fonts the way this tutorial describes is only compatible with Internet Explorer 4 and above (according to W3C Schools, 93% of internet users use IE4+ as of October 2002). This method converts a common True Type Font to the Embedded Open Type format (.eot files) which allows fonts to be downloaded and only used on specific web domains. Netscape 4 as well as Internet Explorer 4 and above also support embedding fonts in TrueDoc format (.pfr files), but since 1998, support for this format has eroded heavily. Encoding fonts in this format requires the purchase of expensive software that is being phased out by many of its developers, including its creator, Bitstream. So, that leaves us with just EOT, a slightly inferior format that was created by Microsoft and works beautifully with Internet Explorer. Let's get started.

First, you need to download the latest version of WEFT here. WEFT is a free program written by Microsoft to encode normal TrueType or Postscript fonts into the .eot format. For more information about WEFT you may want to visit its official homepage.

WEFT is a surprisingly powerful program that can do things such as examine an already existing web page and create a .eot file containing all the fonts used on it. For this tutorial, however, we'll just stick to the basics of how to embed a single font. Open up WEFT, close the Add Web Pages pop-up if it should open, and go to Tools>Fonts to Embed. Click on Add and choose the font that you would like to embed. The default settings for the rest of the options are fine. I chose to embed Broken 15, a font available on Spoono in the Grungy Fonts section.

Hit Close and click on the Embed button on the top toolbar. Choose a location were the .eot file is to be saved and click Edit to enter a domain name where the font can be used. The default options are fine for the three checkboxes.

Click on Finish and like magic, your .eot file will be created. The sleekest way to embed your font in a web page is by loading it in a .css file. If you already have a .css file for the page, open that. Otherwise, open a blank text file and save it afterwards with a .css extension. Type the following in your .css file:

Notice that the last attribute points to the location of the .eot file the I created before. Enter your file there, and also write a name to give the font in the font-family attribute. You may call it whatever you want. Next, create a class that makes use of your font in your .css file by typing something like this:

The attributes are self-explanatory Notice that additional fonts have been defined for browsers.cough.Netscape.that aren't compatible with EOT. Also, if your font has a space in its name, you should include single quotes around it, like Small Fonts has above.

Save your .css file and upload it along with your .eot file to the same directory on your web site. Now any time you use your class in a web page, the embedding font will be used. In my case, <p class="psycho">This Looks Embedded to Me</p> produces:

This Looks Embedded to Me

Templates Resource Hosting
Domain Names · Templates Resource