The Bearz Embed EOT Tutorial

If you have followed my Tutorial #6 you will have created an EOT font file which is sitting nicely in a folder on your hard drive at C:/WebFonts. This font is embedded into the html file that we used and created as part of Tutorial #6 . . . . .

If you open the file EOTFontBase.htm we previously used to create the EOT file from you will see the following change has been made by WEFT3

<STYLE>
BODY {
BACKGROUND-ATTACHMENT: fixed;
BACKGROUND-POSITION: 0px 0px;
BACKGROUND-REPEAT: repeat;
COLOR: #000000;
FONT-FAMILY: 'Tabitha';
FONT-SIZE: 14pt;
FONT-STYLE: normal;
MARGIN-LEFT: 10px;
MARGIN-RIGHT: 10px;

</STYLE>

</STYLE>

</HEAD>

<p><font face="Tabitha" color="#000000">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>123456789!"£$%&*</p>
<p>()_-+=?/><,.';@:~#}{[]</font> </p>
<DIV> </DIV>

</BODY>
</HTML>

I've highlighted the part that has been added . . . . basically this is a section that defines style to the HTM file and 'sources' the EOT font declared by naming it and stating where it can be found.

This is great if the EOT font and the htm file were to be uploaded to a Web Site where they could be sitting together waiting for someone to open the HTM file and view the page created in the EOT font declared in this changed style definition.

However we want to be able to use the EOT font to display our stationery message, in the font in which we want it viewed, on the viewer's computer . . . . . whether the message is sent as a Newsgroup message, private message or viewed by one or many peopleWhat we want to do is add into any HTML file used to send stationery messages a little extra that calls up the embedded font and set the HTML file to display this font on the viewer's computer.We need to change the normal font declaration in the HTML file which you'll find in te STYLE tags from a normal font and instead use the name EmbeddedOpen any pre-existing Stationery HTM(L) file in Windows Notepad and change the font name, as seen below . . . . . to Embedded

N.B. You will need to change the font colour to suit the stationery background strip or the colour background used and of course the font size may need to be changed, i.e. Tabitha is a small font in that it comes up smaller than most common fonts used, so where you might usually use Size 12 you might prefer to use Size 14 or 18.

<STYLE>
BODY {
BACKGROUND-ATTACHMENT: fixed;
BACKGROUND-POSITION: 0px 0px;
BACKGROUND-REPEAT: repeat;
COLOR: #000000;
FONT-FAMILY: Embedded;
FONT-SIZE: 14pt;
FONT-STYLE: normal;
MARGIN-LEFT: 10px;
MARGIN-RIGHT: 10px;

</STYLE>

You'll notice that the original font name was enclosed in Parenthesis . . . . after changing the name to Embedded we get rid of the Parenthesis.

Now we can add the following text script into the HTM(L) file just before the </BODY> tag which you'll find near the end of the script.

Click here to get this script in TXT format . . . .

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

I've highlighted in the above image the part where you can change the script to tell the HTML file where to find EOT font file . . . . . . this is all that needs to change if you want to switch embedded font each time you make a stationery.

You may or not have noticed that the EOT referred to by the script is named with an 'e' instead of a '0'. What I do is create a copy of the EOT font created in WEFT3 and then rename it in Windows Explorer as having an 'e' instead the '0' . . . . . . this gives me one EOT font to be uploaded to the Bearz Cave if I choose to do so AND leave one font for use specifically with stationery. (It's a hangover from the early days of creating EOT files when we used to have to hack the EOTs to make them useable in Stationery - fortunately Microsoft now include this 'hack' in the EOT font creation process!)If you choose to just use the EOT fon you've created just for stationery then there is no need to make a copy . . . . . you can either create a copy and rename it OR you can just refer the script to the created EOT file name as it stands!!

That's it - we have made the EOT file and made the embedding stationery font file and now we just need to embed it is our stationery as I've described it and we can call up the changed HTM(L) file in your Newsreader and send the message to wherever and it will be viewed as sent.

I hope this has been helpful.

Do let me know if you need any further advice.

Just click on the Bearz logo below to email me