Click Here to Install Silverlight*
United StatesChange|All Microsoft Sites
Microsoft

Typography Home   Typography Home

Free font tools > WEFT

WEFT 3 Tutorial

Microsoft Typography
January 2001


This guide explains how to analyze a sample Web page and create a font object that will work when linked to that page when uploaded to your Web server.


Understanding 'allowed roots'

For font objects to work properly, the concept of 'allowed roots' (also known as 'URL binding') needs to be understood.

Have you ever created original GIFs and JPEGs for your site, only to discover weeks later that someone has been reusing them on their site without your permission? Have you ever thought how great it would be if your images could somehow be tied to your site's address so that they couldn't be reused in this way? Tying or 'binding' a GIF to a particular Web site URL isn't yet possible, but URL binding is a requirement for font objects posted on the Web.

Misunderstanding or mistyping allowed roots is the main reason why font objects fail to work. This tutorial should help you avoid these problems as well as introduce you to the WEFT wizard.


Step 0 - What you'll need

Before starting, make sure you have all of the necessary ingredients in place:

  • Microsoft Internet Explorer 4, 5 or 5.5 running on Windows 95, 98, NT or Windows 2000.
  • Microsoft Web Embedding Fonts Tool 'WEFT' version 3.
  • A text editor such as Notepad to create and modify a test Web page.
  • A Web or Intranet server and a tool to upload the test page and font object to your Web server.

Top of page


Step 1 - Note the access URLs

Make a note of all the addresses that could be used to access your Web page once it has been copied to your server. This list may include intranet test servers, Internet servers and local mapped drives that you use for testing. You don't need to note the full URL, just the first part (the high level domain), this will most likely be a Web server name, Intranet server name or drive letter.

For a page posted on 'http://www.microsoft.com/typography/', the list may look like this:

http://www.microsoft.com/ - the main address
http://www.asia.microsoft.com/ - the Asian mirror of Microsoft.com
http://www.eu.microsoft.com/ - the European mirror
http://microsoft.com/ - dropping 'www'
http://eu.microsoft.com/
http://asia.microsoft.com/
http://internet-build1/ - an internal build server
http://internet-build2/ - another internal build server
http://fontweb/ - an intranet test server
http://mscominternal/ - an internal test server
file://c:\ - a local hard disk
file://d:\
file://a:\ - a local floppy drive
file://j:\ - a local Zip drive

For your page the list may look something like this.

http://www.your_web_server.com/ - your server
http://your_web_server.com/ - your server without 'www'
http://your_intranet_server/ - your intranet server
file://c:\ - your local hard disk

Top of page


Step 2 - Build a page to analyze

Create a folder on your local C: drive called 'weft' and using Notepad create a file containing the following code. Save the file 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>

Top of page


Step 3 - Run WEFT

Launch WEFT 3 by clicking the 'Start' button, selecting 'Programs/OpenType Tools/Microsoft Weft'. WEFT 3 will automatically run the WEFT wizard. Select 'Next' and you will be prompted to enter your name and e-mail address. Do so and click 'Next'.

On the next screen, enter the location of the test page. Type 'c:\weft\test.htm', then click 'Add'. After a few seconds, you should see a screen similar to the figure below. Click 'Next'.

The Add Web page screen

Figure. The Add Web pages screen

On the next screen, click 'Next' again. WEFT uses Internet Explorer to analyze the page's use of fonts. After a short while, the 'Used fonts' screen should appear, showing the details shown in Figure 3. Click 'Next'.

WEFT's analysis of the test page

Figure 3. WEFT's analysis of the test page

Top of page


Step 4 - Where to create the font objects

The 'Create Font Objects' screen will be displayed. The input field labeled 'Enter the location where the fonts will be created' should contain 'file://c:\weft\'. This location is fine, as we will copy the font objects to your Web server later.

The location where the fonts will be created

Figure. The location where the fonts will be created

Top of page


Step 5 - Enter the allowed roots

WEFT 3 will populate this field automatically based on the location of the pages that were analyzed.

The allowed root suggested by WEFT 2

Figure. The allowed root suggested by WEFT 2

You should keep this allowed root so you can test the page before copying the page and font objects to your Web server. To add the additional roots you listed in step 1, click the 'Mirror sites...' button.

Figure. Additional allowed roots

Enter the first address from your list. Ensure that the full root is entered, that the protocol is correctly selected, and that any slashes ('\' or '/') are in the right direction. When you have entered all of the allowed roots, click 'OK'.

Note: The allowed root 'file://c:\weft\' is displayed as 'file:///c|/weft/' - this will not cause any problems.

Top of page


Step 6 - Continue embedding

Click 'Next' to start creating the font object and saving it to the 'weft' folder on drive C:.

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 'Next' to start this process.

On the final screen, click 'Finish' to close the WEFT wizard.

Top of page


Step 7 - Modify the test page

Load the modified Web page into your favorite text editor. Change 'Arial' references to 'myfont'. This will make it easier to test that the font object has been successfully created.

<HTML>
  <HEAD>
    <TITLE>Test Page</TITLE>
<STYLE TYPE="text/css">
 <!-- /* $WEFT -- Created by: () on 8/23/2000 -- */
  @font-face {
    font-family: Arial;
    font-style:  normal;
    font-weight: normal;
    src: url(ARIAL0.eot); }
 -->
</STYLE>
  </HEAD>
  <BODY>
    <FONT FACE=Arial SIZE=5> a b c d e f g </FONT>
  </BODY>
</HTML>

The modified code should look like this:

<HTML>
  <HEAD>
    <TITLE>Test Page</TITLE>
<STYLE TYPE="text/css">
 <!-- /* $WEFT -- Created by: () on 8/23/2000 -- */
  @font-face {
    font-family: myfont;
    font-style:  normal;
    font-weight: normal;
    src: url(ARIAL0.eot); }
 -->
</STYLE>
  </HEAD>
  <BODY>
    <FONT FACE=myfont SIZE=5> a b c d e f g </FONT>
  </BODY>
</HTML>

Top of page


Step 8 - Copy web page and font object

Using your favorite tools, copy or upload the Web page and font object to your server. For the purposes of this tutorial, the Web page and font object need to be in the directory or folder on the Web server.

Top of page


Step 9 - Test the page

Run Internet Explorer and enter the page location into the address field:

Testing the page

Figure. Testing the page.

If everything worked up to this point, Internet Explorer will download the page and font object.

Internet Explorer will confirm that one of the allowed roots in the font object:

http://your_intranet_server/
http://www.your_web_server.com/
http://your_web_server.com/
file://c:\

matches the first part of the address Internet Explorer used to access the page:

http://your_intranet_server/test.htm.

If there is a match, Internet Explorer will temporarily and privately install the version of Arial contained in the font object and use it to display the contents of the test page.

If the text is displayed in a default font such as Times New Roman, then something went wrong.

Top of page


What can go wrong

Incorrect 'allowed roots'

The most common problems relate to incorrect 'allowed roots'. For example, you may have included http://www.your_web_server.com/ as the only allowed root in your eot, but tried to access your page via http://your_web_server.com/. The missing 'www' is important.

You may have included http://www.your_web_server.com/fonts/ as the only allowed root in your eot, but tried to access your page via http://www.your_web_server.com/pages/. Here the allowed root doesn't match the page address. You should recreate the eot's using http://www.your_web_server.com/pages/ or just http://www.your_web_server.com/ as 'allowed roots'.

Another common mistake is trying to access a page via a numeric address, but neglecting to include it as an 'allowed root'. For example, if you want to access a page via http://nnn.nnn.nnn.nnn/, this should be included as an 'allowed root'.


Server blocking of font objects

This should be considered if you have confirmed that the allowed roots in your font objects match exactly the location of your test page and your page continues to fail.

Some Web servers, especially free web hosting servers, do not recognize the .eot extension. Try typing the complete URL address of your font object into Internet Explorer, http://www.your_web_server.com/arial0.eot. The error returned by the server should indicate the nature of the problem.


Top of page


© 2014 Microsoft Corporation. All rights reserved. Contact Us |Terms of Use |Trademarks |Privacy & Cookies