| Microsoft Typography | ...on the Web | ...embedding | ...WEFT 2 | WEFT 2 quick start guide | |||
|
Create a folder on your local C: drive called 'weft' - place the folder on the root of your C drive because WEFT does not like folder locations that include spaces (such as 'My Documents'). Create a page containing the following code and 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 2 by clicking the 'Start' button, selecting 'Programs', 'OpenType Tools', 'Microsoft Weft'. WEFT 2 will automatically run the WEFT wizard, click next and you will be prompted to enter your name and e-mail address. Do so and click next. On the next screen you need to enter the location of the test page. Type 'c:\weft2\test.htm'. Then click 'Add' and after a few seconds you should see a screen similar to that shown in figure 2. Click 'next'.
Figure 2. The Add Web pages 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, and the allowed roots under which they will function. WEFT 2 will populate the entries as shown in figure 4.
Figure 4. Font object location and allowed roots. Note. The font object you create will only work when accessed by a page located at c:\weft\ If you upload this font object to a Web server or other location it will not work. See the next tutorial for details.
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.
<STYLE TYPE="text/css">
<!-- $WEFT -- Created by: () on 10/12/98 --
@font-face {
font-family: Arial;
font-style: normal;
font-weight: normal;
src: url(file:///c|/weft/ARIAL0.eot); }
-->
</STYLE>
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">
<!-- $WEFT -- Created by: () on 10/12/98 --
@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 2 | WEFT 2 quick start guide | |||