EOT Files Explained
If you are reading this page, chances are you have received an .eot file containing your signature or logo. This page will give you a bit of background info on why .eot files exist and how to implement them on your web site.
Font embedding,
When you ordered your font, you selected one of 4 embedding options
(see http://www.e-signature.com/en/embedding_en.htm).
The purpose of selecting an embedding level was to be able to
"attach" your font to a file such as a Microsoft Word
document in order to ensure that the recipient will see your font
displayed correctly. Embedding works fine in programs such as
Word, PowerPoint, the Corel Suite or some other programs that support
it. Unfortunately when it comes to the web, an html document can
not embed a font. For this reason, version 4 and later web
browsers support embedding through something called an .eot file.
The .eot file
The file you have received is a copy of your True type Font (TTF) set
into a format that a web browser can understand. A user's
browser will download the font contained in the .eot, store it
in its memory, and only make it available for web pages that are
located in a domain specified in the .eot (this is why we ask you for
the url of your website). If someone copies the .eot and tries
to use it somewhere else (or you move your web site to a new domain),
the .eot will not function. This is a security feature built in
to prevent unauthorized use.
Specifying your font in an html page
As a web designer, you are probably familiar with the <font
face="Arial">---TEXT----</font> method of
specifying a font to format some text. This system will work so
long as the font specified is available on the user's system.
Chances are however that your custom font is not already present on
the user's system. We download it into the user's browser by
putting the following code between the <head> and </head>
tags in the html page (if you are using a CSS
style sheet which contains all of your style definitions, you can copy
the following definition to it)
<STYLE
TYPE="text/css">
<!--
@font-face { font-family: XYZ Logo;
src: url(XYZ.eot);
}
-->
</STYLE>
In this case, we have defined a font family called 'XYZ Logo" and told the browser where to find the .eot with the instructions for it (url(XYZ.eot)). You need to substitute the name of your font in the first line (where it says XYZ Logo) and the location of your .eot file in the second. If your web site is spread out over several directories it is best to use an absolute reference such as src: url(http://www.xyz.com/XYZ.eot).
After you have defined the font family, you now need to define styles that use this font. As an example, if your logo is to be called with a style called "logoheader", you can define it as follows:
.logoheader { font-family:
"XYZ Logo";
font-style: normal;
-options: normal |
italic
font-weight: normal; -options:
normal | bold
color: #000000; -options:
color defined by Hexadecimal RGB or by English name such as black |
white
font-size: 18px; -options:
xx-large | x-large | large | medium | small | x-small | xx-small
text-transform: none;
}
The .logoheader (or whatever you choose to call it) definition should be placed in your style sheet or between the <STYLE> and </STYLE> tags in each page if you prefer to define your styles on every page. You can define as many styles as you need - example, you could have one very large version of your logo as a page background, a medium sized one in a title, and small ones in bullets. See http://wsabstract.com/dhtmltutors/cssreference.shtml for a complete set of ways you can define a style.
In your html document, you call the style with commands such as <p class="logoheader"> X </p>. What this has done is format the "X" to the logoheader style, which means the X will be generated with the XYZ logo font, be 18 pixels high and colored black.
Want to see this all put together? Download the jetform_en.htm and jetform0.eot files and place them in a directory called c:\E-Signature. Placing the files anywhere else will prevent the .eot file from functioning (try it for yourself, this demonstrates the security feature discussed above). You can peek at the code in the jetform_en.htm file by opening it using Wordpad or any html editing softare.
Have any more questions about .eot files? Get in touch with us at:
E-Signature
Canada
Telephone:
Facsimile:
E-mail:
The E-Signature team.
