Creating Embedded fonts |
Folks have mailed me asking questions about "How do you make EOT files and how do you embed them in your stationery". Hopefully, I can help by putting down a step-by-step guide to how I make EOT files using Microsoft Weft and then how I embed them into stationery. EOT files are created in WEFT for embedding True Type fonts (True Type being fonts that are WYSIWYG or What you see is what you get) in Web Pages but we're going to cheat a little and create them for use in stationery. Have a look in your C:/Windows/Fonts folder and youll see several, if not all, your fonts have a name plus the suffix TTF . . . . any of these fonts can be used in this process.
|
The first requisite for creating EOT files is that you need to download WEFT3 from Microsoft.
|
Creating EOT Files |
| <HTML> <HEAD> <STYLE> </HEAD> <BODY BACKGROUND="" bgColor=#ffffff> <p><font face="Tabitha" color="#000000">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p> </BODY> |
This file will need to be saved to a folder on your hard drive and I would create the folder with the name "WebFonts" , i.e. C:/WebFonts. It is called "EOTFontsBAse.TXT" and needs to be saved as "EOTFontsBase.htm". This file is a simple HTML file that declares the font name to be Tabitha and then displays the text as all the Capital and Lowercase letters of the alphabet together with numbers and symbols and does so three times . . . . in Normal font format. The reason will become clear!
|
Now we want to start WEFT and I would recommend using the Wizard features although you can go through the whole process step-by-step as you gain experience in the process and procedures involved. This is the front page of WEFT3 as it opens
You might be asked to reset the Font Database of your computer . . . let WEFT do this because it will look in the Fonts folder and check the True Type fonts you've got installed. You might also like to click on Tools>Set User Information and set up a User name (which can be real or pseudonym, i.e. I use "Bearz") and your email address . . . . this gets embedded inot the EOT file in due course and gives you 'ownership' should it matter to you. :o) |
Click on Tools>Run Wizard and you will be asked to insert the source file via the page displayed here.
If you click on the three dot button you can browse to the file name (in this case EOTFontBase.htm in C:/WebFonts
Select it and click on Open . . . .
|
This opens this window
Click on the Next button. This will continue the Wizard which will now 'check' the HTM file for fonts used . . . . click the Next button again (in between you get a page offering advice to connect to Microsoft to get information about Weft and embedding fonts . . . . it is worth the trip and this is the URL should you want to visit there another time: http://www.microsoft.com/typography/web/embedding/weft3/weft00.htm After the fonts used have been identified you will see this page . . . .
The green tick against Tabitha indicates that this is the Normal font and that it can be embedded quite properly. Click on Next yet again . . . and you get this screen which needs to have the choice filled in:
We want to create the EOT in C:\WebFonts\ (please note the backslashes) We also want to insert details of where we might want to 'source' the EOT . . . . after file:// we use backslashes and we need to put in the C drive, C:/WebFonts and other various locations. If you click on the "Mirror Sites button you can use this window to declare the locations:
As I use these fonts on my web site I include the Bearzcave URL (both with and without the WWW prefix - this is an oddity of Internet use because some people use the WWW prefix and others don't and so I want the EOT to load whichever way they use the Web and find my Website) . . . . I also want to be able to move the EOT about on my hard drive and have it useable at a later date so I put in the C drive, and D, E, F and G drives should I want to move the EOT to those devices at a later date. MHTML is a means to send parts or all of a formatted web page so we include it as a source. When ready click on Next yet again . . . . this creates the font as an EOT in the C:/WebFonts folder. The final screen gives you the opportunity to save the project . . . . . I never bother but you can do so if you wish. :o)
|