logo

Click the logo to add
this site to your Favourites


Search:

This Site The Web


Quick Links

  


Subscribe to my Newsletter


Books presented in association with:

Chapters.ca


Your Free E-Mail
Account:


   


Send me mail!

Send Me Mail


 

 

 

Embedding Fonts

OE4


 

Introduction
The Script
How to use it
Using the Embedded Font
Where to get EOT files
Known Issues

 

Compatibility:  The script detailed on this page works only in Outlook Express 4, please see the OE5 Font Embedding page to learn how to do this in Outlook Express 5

 

Introduction:

Thanks to the tenacity and sheer genius of Steve Cochran, we have the ability to embed fonts into Outlook Express messages.  Before you get too excited, bear in mind that not every font can be embedded, and embedding a font at all is a somewhat difficult process.

For starters, you cannot embed a truetype font file (*.ttf).  This must first be converted to another file type called an EOT.  We'll cover where to get EOT files a little later.  For now, just bear in mind that the EOT files needed are only for use in Outlook Express messages - you can not use them as fonts in any other windows application and they will not even work on the World Wide Web.

Once you have your EOT file, you need to use a script to embed/use it of course.  

 

The Script:

There are a couple of versions of the Font embed script out there - the one I prefer is:

<img id="efont1" src="YOUR EOT FILE HERE" height="10" width="10" style="display: none">

<script language="VBScript">
document.writeln("<STYLE> @font-face { font-family: embedded; src: url("&efont1.src&"); }</STYLE>")

</script>

 

How to use it:

The script shown above is colourized to make it easier to read, as such it it "for display purposes only". To get a fully functional copy of the script for your use, click here to download a script "template". 

The zip file you just downloaded contains a single file - fontscript.txt.  Unzip this file somewhere and open it with Notepad or your favourite text editor.  Select the entire script and paste it into the HTML document that you wish to embed a font into.

If you use a graphical HTML editor  - to use that script and have it work, it must be pasted into the HTML view of your editor.  If you paste it into the regular view of such a program it will not work. 

Congratulations, you now have a font embedding script added to your stationery.  However, if you've been paying attention, you'll know that if we tried to use this script as-is it doesn't yet reference any font file, it needs to be told the name and path of a font file that is actually on your system.

Find the line with the <img> tag:

<img id="efont1" src="YOUR EOT FILE HERE" height="10" width="10" style="display: none">

and replace the "Your EOT File Here" in the src attribute with the path and filename of an EOT  file actually on your system.  So if the file example.eot is in your c:\fonts folder, the tag would look like this:

<img id="efont1" src="c:\fonts\example.eot" height="10" width="10" style="Display: none">. 

Please note that in OE4 you do not need to use an absolute path to the EOT file, a relative path will work fine.  So if the EOT files are stored in the Fonts sub-folder of your stationery folder, the line above could look like this:

<img id="efont1" src="fonts/example.eot" height="10" width="10" style="Display: none">. 

That's pretty straight forward, and you don't even have to worry about what the rest of it means or how it works, the only important areas are the src= element of the <img> tag.  This is where you incidate the path and filename of the EOT file you wish to use. 

 

Using the Embedded Font:

Now that you have the EOT file for the font actualy embedded in the message, you're going to want to know how to make use of it.

Find the line of the script which begins with "document.writeln":

document.writeln("<STYLE> @font-face { font-family: embedded; src: url("&efont1.src&"); }</STYLE>")

Look along that line until you come to "font-family: embedded", this is where you indicate to Outlook Express the name of the font you wish to use.  You don't need to enter the actual name of the font, you could actual put in anything you like, such as:  "arglebarglewhoosh".

For ease of use, I'd recommend leaving this value set to "embedded" as shown above, this makes it easiest for other people to follow along.

Now that the script knows what font is embedded, we just have to tell OE how to display your message in the embedded font.  This isn't difficult at all. To accomplish it we need to add something to the Style section of the document. 

If you read the Setting the Default Font page you probably already know what needs to be done now. You guessed it, we need to set a default font for the stationery.  If you haven't read that page then do so now.   To use the embedded font,  the font you specify in the style must use the same name as you used in the font embed script - that's another reason why I had you use word "embedded", it makes it much easier to get this part right:

<style>
body {
font-family: embedded;
}
</style>

That's all there is to it.  When you use this stationery, the font will be set to the embedded one.  Please note, since scripts do not function in the OE compose window you will not see your embedded font while you type your message.  Rest assured, the embedded font will show when the message is sent.

When typing your message, be careful not to change fonts.  You may change the size, colour, or Bold or Italicize or Underline fonts and the embedded one will still show, but if you actually change to another font, then the embedded font will no longer display properly.

 

Where to get EOT files:

So where can you get these all important EOT files?  I have provided a few on the Download Page of my site.  Just download those then put them in a folder somewhere and they're ready for use.  I recommend creating a subfolder under your stationery folder to keep them in, but the choice is yours.

If you wish to make EOT files of some of your fonts, however, that is another story.   This process requires you to use a program from Microsoft called WEFT.  The exact process is beyond the scope of this document.  Please see Steve Cochran's instructions on Eric Miller's site at http://www.okinfoweb.com/moe/format/format_007.htm.

 

Known Issues:

One thing you should be aware of is that you may not be able to see your embedded font when you preview your document in Internet Explorer or the preview mode of a program like FrontPage 98 or Arach.  Some EOT files preview properly, some don't.   I don't know why. 

This is not a problem however, as the embedded fonts still display properly when used in Outlook Express, it is just when previewed in the HTML editor that they do not show up properly.

The EOT files I have made available on my download page are all the ones I had which previewed properly.  Hopefully they will work for you as well.  Just keep this limitation in mind in case you acquire any other EOT files.

 

Home | FAQ | Download | TroubleShooter | Discussion | PSP | MIC | WET Retrospect | Feedback

 

© 1998, 1999 sven All content designed and written by sven, except where noted.

Disclaimer:  I am not affiliated in any way, shape or form with Microsoft Corporation.  All opinions expressed on this web site are mine alone and may not represent those of the majority of Outlook Express users.  All brand and product names are trademarks or registered trademarks of their respective owners.  No animals were harmed in the creation of this website.  All characters and situations portrayed on this website are completely fictional.  Any resemblance to actual persons or events is purely coincidental.  Your mileage may vary.  Past performance is not a reliable indicator of future gain. No purchase necessary.