| Microsoft Typography | ...on the Web | ...embedding | WEFT | Quick start guide | |||
|
This brief tutorial should help quickly familiarize you with the use of the WEFT wizard. You will need Microsoft Internet Explorer 4.0 for Windows and the latest version of the Web Embedding Fonts Tool installed.
Create a folder on your local C: drive called 'weft' and create a page containing the following code. Save the page in the folder as 'test.htm'.
<HTML>
<HEAD>
<TITLE>Test Page</TITLE>
</HEAD>
<BODY>
<FONT FACE=ARIAL SIZE=5> a b c d e f g </FONT>
</BODY>
</HTML>
Here the font Arial has been chosen. Although you'll probably never want to embed Arial in a Web page, it's a good one to use in this tutorial since we know it's coded properly, and shouldn't cause any errors. Launch Internet Explorer 4.0 and point it to 'C:\weft\test.htm' to check that the letters are displayed using the Arial font.
Figure 1. The page displayed in Internet Explorer 4.0.
Launch WEFT and enter your name and e-mail address into the first screen that appears. On the next screen you need to enter the location of the test page. Type 'file:///c:/weft/test.htm'. Be sure to include the 'file:///' as this is a requirement of the tool. Then click 'Build page list' and after a few seconds you should see a screen similar to that shown in figure 2.
Figure 2. The Add Web page screen
Figure 3. WEFT's analysis of the test page The next screen lets you enter the location where you'd like the font objects to be created. For the location enter 'file:///c:/weft/'. This screen also requires that you enter at least one 'Allowed root'. This feature prevents the unauthorized use of the font objects you create by other Web sites. As the test page is on your computer's C: drive you need to enter 'file://c:\' as an allowed root (note only two forward slashes '//' should be used when specifying an allowed root).
Figure 4. Font object location and allowed roots.
The next screen lets you save a modified version of your page to its original location. This modified version of the page will contain the CSS code that links the font object you've just created to the page. Click 'publish pages' to start this process. On the final screen click 'Finish' to close the WEFT wizard.
In Internet Explorer 4.0 view c:\weft\. You should see that an .EOT file has been added to the folder. This file is the font object you have just created.
Figure 5. Content of the c:\test folder. Now point Internet Explorer 4.0 at c:\weft\test.htm. The page should look exactly the same as it did before. Right click on the browser window and choose 'view source'. WEFT will have added a CSS code block to the HEAD section of the page similar to that shown.
<!--
@font-face {
font-family: Arial;
font-style: normal;
font-weight: normal;
src: url(file://c:\weft\ARIAL0.eot);
}
-->
This code tells Internet Explorer to use the font contained with the font object 'ARIAL0.eot' whenever the page requests the Arial font. The easiest way to check that the embedding process has worked properly is to change the two references to Arial to a custom name.
<HTML>
<HEAD>
<TITLE>Test Page</TITLE>
<!--
<STYLE TYPE="text/css">
@font-face {
font-family: myfont;
font-style: normal;
font-weight: normal;
src: url(file://c:\weft\ARIAL0.eot);
}
</STYLE>
-->
</HEAD>
<BODY>
<FONT FACE=myfont SIZE=5> a b c d e f g </FONT>
</BODY>
</HTML>
If everything has worked correctly the page should still be displayed using the Arial font. If it doesn't seem to have worked please go over the steps one more time, double checking that your entries match those shown.
Please report any problems you encounter to us via the e-mail address listed here..
|
|||
| Microsoft Typography | ...on the Web | ...embedding | WEFT | Quick start guide | |||