To use EOTs in Outlook Express, we must embedded it in an
<OBJECT> tag, then used a small <SCRIPT> to show the embedded
font. As a minimum, these are the two tags that must be present in all
emails that contain EOTs.
1. Using an EOT as a default font in
your stationery.
2. Using an EOT in your stationery where it is NOT the default
font.
3. Using multiple EOTs in one stationery.
In all examples, we start with the same <OBJECT> and <SCRIPT>
code, but make slight modifications each time.
<OBJECT>
The <OBJECT> is what we use to embed the EOT in the stationery.
It was not an object made for EOTs, it is actually just a media player object
that we are using as a tool to get the EOT file to embed. The standard
<OBJECT> code to use is:
<OBJECT
classid=clsid:05589FA1-C356-11CE-BF01-00AA0055595A id=eot1 style="LEFT:
-800px; POSITION: Absolute">
<PARAM NAME="Filename"
VALUE="file://C:\WEFT\Calligrapher.eot">
</OBJECT>
Things to note in the above code:
~Both the opening <OBJECT> and the closing </OBJECT> tags
are required.
~Within the <OBJECT> tag, never alter the "classid="
section.
~Within the <OBJECT> tag, "id=eot1" identifies this EOT as the
variable "eot1". Later on, when we embed a second EOT in the
same email, change this to "id=eot2" in a second
media player object.
~Within the <OBJECT> tag, the "style=" section positions the media
player -800 px off the left side of the screen so that
it does not interfere with the composition of the rest of your email
message.
~The "<PARAM NAME=" section includes both the path and the filename
to the EOT file on your hard drive. You MUST include the path as well
as the filename, or the EOT will not embed.
~Although only the filename "<PARAM" is shown now, once you
preview or save your email, about 20 other "<PARAM" tags get added to your
object code. Don't worry about any of them, they are added by OE as the
remaining default parameters for the media player object, none of which are a
concern when using this object to embed the EOT.
<SCRIPT>
The <SCRIPT> tag contains the code to use the embedded font.
The basic <SCRIPT> code is:
<SCRIPT
language=VBScript>
document.writeln("<STYLE> @font-face {
font-family: embedded; src: url("&eot1.filename&");
}</STYLE>")
</SCRIPT>
Things to note in the above code:
~Both opening <SCRIPT> and the closing </SCRIPT> tags are
required.
~The "font-family: embedded" section is the link to the font declared
within the script. You may change the word 'embedded' to the actual
font name the EOT represents. We will be coming back to this piece of
code often in the examples below.
~The "url()" section tells the script which media player object id and
filename to use for this particular font. Note we see the two pieces of
information we included in the <OBJECT> tag -- the "eot1" from the "id="
section and the "filename" from the <PARAM>. When we use just
one embedded font, we don't have to make any changes to this part of the
script. We will be coming back here when we embed more than one EOT in an
individual stationery.
Credits: This code is not mine. It was probably first written
by Steve Cochran, the Microsoft MVP who has developed a lot of
great OE utilities. Steve's web page at:
http://home.highertech.net/~scochran/ .
OK, now that we know what this code means, let's use it.
Start a new email message.
You can put in any address, as we won't be actually sending this one
out. Put "EOT test" as the subject.
Make sure you are in Rich Text (HTML) mode. (Click
Format on the Menu). Also make sure you have the
"Edit/Source/Preview" tabs available at the bottom of your new message.
(Click View on the Menu then click to place a checkmark next to
Source/Edit).
While in the Edit tab, just type in "This is a test".
Now click on the Source Tab.
1. THE EOT AS THE
DEFAULT FONT
To use the EOT as the default font in your stationery, declare it in
the <HEAD><STYLE> section of your email.
Copy and paste the following code somewhere in
the <HEAD></HEAD> area. If there are <STYLE>
tags there already, replace them.
<STYLE type=text/css>
BODY
{
font-family: embedded;
font-size:
18pt;
}
</STYLE>
Make sure a semicolon (;) separates each parameter of the style. You
don't have to have a semicolon after the final parameter and before the closing
curly-bracket (}).
Next, we need to insert code at the end of the <BODY>
section. Change the path and filename in red below to that of your actual
path and EOT file name. Then, just before the closing </BODY> tag,
place the following <OBJECT> code and <SCRIPT> code.
:
<OBJECT
classid=clsid:05589FA1-C356-11CE-BF01-00AA0055595A id=eot1
style="LEFT: -800px; POSITION: Absolute">
<PARAM NAME="Filename" VALUE="file://C:\WEFT\Calligrapher.eot">
</OBJECT>
<SCRIPT language=VBScript>
document.writeln("<STYLE> @font-face { font-family: embedded;
src: url("&eot1.filename&"); }</STYLE>")
</SCRIPT>
With this code in place, the EOT font will be the default font. It
doesn't matter what EOT you used, since you have used the generic "embedded"
word as the font in both the script and the style sheet. The only
thing that changes what EOT is used is the path and filename.
TESTING:
Click on the Preview Tab. You should see your message first in your
default email font, and then a second or two later, the EOT kicks in as the
default font.
Did it work? Great! If it didn't, go back to the Source Tab and
check to make sure you have the correct path and filename, and that OE had not
placed any <FONT> tags around your "This is a test" section.
(<DIV> tags are OK if found there...Other <FONT face=""> tags are
not).
Once you can see your EOT at work while in preview mode, we need to see if
it will actually embedded in the email:
It is very important to test your email to see if the EOT embedded
prior to sending it. We need to do this before sending it anywhere.
Click on the Edit Tab, and then click the black box in the upper right
corner to close your message. When OE asks if you want to Save your
message, click Yes. It is now saved in your drafts folder.
Go to your Drafts folder, and look at the size of the message.
(If you don't have message size as an option, right click on any of the
columns that show up, select Custom, and add Size). If your test
email is only 1 or 3 KB, the font did not embed. If it is larger,
usually about 25 KB, it did embed.
While viewing your test message in the Drafts folder, do Ctrl-F2 to view
your source code. Use Search to find the word 'filename'. Note that
instead of C:\WEFT\Calligrapher, you now see a string of characters that begin
with 'CIDxxxxxxxx'. This is the way that Outlook Express embeds images and
objects in emails.
When done with your test message, you may delete it from your drafts
folder.
Before we continue, we need to discuss the font naming
convention:
THREE WAYS TO SHOW THE FONT NAME:
1. EMBEDDED METHOD:
'EMBEDDED' USED GENERICALLY
In the above example, it didn't matter what the Font was contained inside
the EOT. "Embedded" was used in both the <HEAD> and the
<SCRIPT> so whatever EOT file was chosen, it would be used. Again,
the code looks like this:
<HTML><HEAD>
<STYLE
type=text/css>
BODY {
font-family:
embedded;
font-size:
18pt;
}
</STYLE></HEAD>
<BODY>
text here
<OBJECT
classid=clsid:05589FA1-C356-11CE-BF01-00AA0055595A id=eot1 style="LEFT:
-800px; POSITION: Absolute">
<PARAM NAME="Filename"
VALUE="file://C:\WEFT\Calligrapher.eot">
</OBJECT>
<SCRIPT
language=VBScript>
document.writeln("<STYLE> @font-face {
font-family: embedded; src:
url("&eot1.filename&");
}</STYLE>")
</SCRIPT>
</BODY></HTML>
The benefit of doing this is that it's easier. Less code to change,
and you don't have to match any real font names with it.
The drawback is that several second pause for loading the EOT. If
the person who receives your email does not have that particular font
on their own machine, that time gap is inevitable. However, if they have
the font, and we modify the code to the font's actual name instead of
'embedded', then their installed font is seen instantly and the EOT is not
needed to view the font.
2. FONT NAME METHOD:
CHANGE 'EMBEDDED' TO THE FONT'S REAL
NAME
In this method, we rename the reference in the script from 'embedded' to
'calligrapher' and just use the word 'calligrapher' in the style
sheet. One of the benefits of changing 'embedded' to the actual font
name is that if you have the font installed on your machine, it's easier to
compose the message without having to go into the 'Source' tab to make
changes. The code for this method would look like this:
<HTML><HEAD>
<STYLE
type=text/css>
BODY {
font-family:
calligrapher;
font-size:
18pt;
}
</STYLE></HEAD>
<BODY>
text here
<OBJECT
classid=clsid:05589FA1-C356-11CE-BF01-00AA0055595A id=eot1 style="LEFT:
-800px; POSITION: Absolute">
<PARAM NAME="Filename"
VALUE="file://C:\WEFT\Calligrapher.eot">
</OBJECT>
<SCRIPT
language=VBScript>
document.writeln("<STYLE> @font-face {
font-family: calligrapher; src:
url("&eot1.filename&");
}</STYLE>")
</SCRIPT>
</BODY></HTML>
I have personally come up with more errors when I do it that
way, as I forget to rename 'embedded' or type in the font name incorrectly in
the <SCRIPT> tag. so I have started using a third system
lately:
3. COMBO METHOD:
USE BOTH THE FONT NAME AND
'EMBEDDED'
To do this, you don't have to change anything in the <OBJECT> or
<SCRIPT> tags.
The only change is to add the name of the actual font to the line in
the <STYLE> tag.
HTML allows you to declare several fonts, each separated by a comma.
It will look for the first font in the list, and if not found, look for the
second font, and so on. Place the actual font first, the word 'embedded'
second. The example looks like this:
<STYLE
type=text/css>
BODY {
font-family:
calligrapher,embedded;
font-size:
18pt;
}
</STYLE>
<BODY>
text here
<OBJECT classid=clsid:05589FA1-C356-11CE-BF01-00AA0055595A id=eot1
style="LEFT: -800px; POSITION: Absolute">
<PARAM NAME="Filename" VALUE="file://C:\WEFT\Calligrapher.eot">
</OBJECT>
<SCRIPT language=VBScript>
document.writeln("<STYLE> @font-face { font-family:
embedded;
src: url("&eot1.filename&"); }</STYLE>")
</SCRIPT>
</BODY></HTML>
If the receiver has calligrapher as an installed font, they will see that
font right away. If calligrapher is not installed, they will see their
default email font for a second, then they will see calligrapher coming from the
EOT.
I like this method the best, as I don't have to make any changes
to the <SCRIPT> tag, and it's pretty obvious to me by looking at the style
sheet what the embedded font is. I suggest you try all three ways and
see what works best for you.
2. THE EOT DECLARED IN
A <FONT> TAG
Use this method if you just want a specific area of your email to contain
the EOT font. This method requires code changes in the
<BODY> section of the email, not the <HEAD>.
Start by composing a simple test email. Make sure it contains
several lines of text like in this example:
Add the standard <OBJECT> and <SCRIPT> code to the end, just
before the closing </BODY> tag. (Make sure to change the path and filename
to that of the EOT you are going to embed). Don't make any changes in
the <HEAD>.
Now, in the part of the message that you want to have the font be the EOT
font, add the <FONT> tag that says as a minimum:
EMBEDDED method: <FONT face=embedded>I finally got a job!!<BR>I'll be flipping
burgers!</FONT>
FONT NAME method: <FONT face=calligrapher>I finally got a job!!<BR>I'll be
flipping burgers!</FONT> (
Change the <SCRIPT> tag from 'embedded' to 'calligrapher)
COMBO method: <FONT face=calligrapher,embedded>I finally got a
job!!<BR>I'll be flipping burgers!</FONT>
~Each EOT has it's OWN <OBJECT> tag, with a unique
"id=eotn" identifier and a different EOT file.
~Each EOT has it's own line of code in the <SCRIPT>
tag. That line of code references the id and filename from the
corresponding Object.
You can add as many EOTs as you would like to email
messages. Just copy the object tags and change the object id to eot3,
eot4, etc, and add an additional line to the script for each
additional font used, making sure to change both the font-family name and src
url id. But remember, each one will increase the overall size of the
email. If your recipient has a slow modem connection, it is not wise to
embed too many images and EOTs in one message.
