Font EmbeddingFont Embedding*
*Contents  *Index  *Topic Contents
*Previous Topic: MoveLight Method
*Next Topic: Data Binding

Font Embedding


Web page designers are at a disadvantage compared to print desktop publishers when creating documents; desktop publishers control every aspect of the layout and choose which fonts their content will be printed in. On the other hand, Web authors are at the mercy of the browser and the user's font support when their content is displayed.

Font embedding has been a feature of Microsoft applications such as Microsoft Word and PowerPoint® for several years. It allows fonts used in the creation of a document to travel with that document, assuring that a user sees the pages exactly as the author intended them to be seen. Now, Microsoft® Internet Explorer 4.0 brings embedded font support to the Web. This technology gives site designers the confidence that Internet Explorer 4.0 users will see their pages exactly as intended.

arrowr.gifEmbedded Font Technology

arrowr.gifEmbedded Font Examples

arrowr.gifLimitations in Internet Explorer 4.0

arrowr.gifInternet Explorer 4.0 Security Alert

arrowr.gifUsing Microsoft WEFT

Embedded Font Technology

In the early years of the World Wide Web, browsers had full control over which font was used to display pages. Later, the FONT element and Cascading Style Sheets (CSS) font-family property were introduced to provide the Web author more control and access to fonts installed on the user's system. However, if the font was not previously installed on the user's computer, the author and user had no recourse but to display the document in a default or secondary font face. Today, Internet Explorer 4.0 supports font embedding, allowing authors to temporarily install fonts on user systems so that Web page content can be rendered exactly as intended.

At this time there is no defined industry standard for font embedding. The Microsoft TrueType font embedding technology is one proposed implementation. The World Wide Web Consortium (W3C) has a working draft available that provides the latest proposed specifications.

Microsoft font embedding uses CSS notation to indicate font styles in Web documents. Designers can limit the frequency that embedded fonts must be transferred to the users' computers if they anticipate fonts that might already be installed. The following example uses an embedded font as a secondary font face, if by chance the preferred font is not already installed on the client computer. 

<STYLE> 
<SPAN style="COLOR: red">@font-face myfont { src:url(garamond.eot); }</SPAN> 
P { font-family: "Garamond, <SPAN class=blue>myfont</SPAN>" }
</STYLE>

For information about the current implementation of embedded fonts in Internet Explorer 4.0, see Limitations in Internet Explorer 4.0.

Different Levels of Font Embedding

TrueType fonts have embedding permissions encoded within them that determine how they can be used by tools that convert them into the embedded font format. There are four levels of embedding:

Embedded Font Examples

The following demonstrations located on the Microsoft Typography Web site show how font embedding is a dramatic improvement over the traditional use of fonts on the Web.

Note You must be online and using Microsoft Internet Explorer 4.0 to view these examples.

Example 1: Healthy eating recipe

Design process. Some type designers don't allow their fonts to be embedded, so the fonts used in this example were first checked using Microsoft's font properties extension. Checking the embedding permissions of the fonts first is the best way to avoid disappointment later.

The page itself was designed around a simple HTML table. Cascading Style Sheet features were used to specify fonts and ensure the correct alignment of the text and symbols. At this stage the fonts used were all installed locally.

When the copy and layout were set, Microsoft WEFT (Web Embedding Fonts Tool) was used to create "font-objects" that were linked to the page. The WEFT tool analyzes the font usage of Web pages, gathers the required characters from each font used, and creates the compressed font objects. It also modifies the HTML page by writing in the Cascading Style Sheet code linking the font objects to that page. If you use View Source on the demonstration page, you'll see the format of the code added. 

@font-face {
    font-family: Goudy Stout;
    font-style:  normal;
    font-weight: 700;
    src: url(GOUDYST0.eot);

This code tells Internet Explorer 4.0 to use the GOUDYST0.eot font object whenever there is text on the page specified in the Goudy Stout font. The following table shows the fonts used by the page, the number of unique characters used, and the size of the font object that contains them.
Font used   Unique characters   Object size  
Pie   9   4.27K  
Goudy Stout Bold   15   7.43K  
Garamond Bold   15   10.3K  
Garamond   19   10.3K  
Script MT Bold   49   3.97K  

How the page looks in other browsers. Browsers that don't support embedding will ignore the code linking the font objects to the page. Users of browsers that support Cascading Style Sheets will see text displayed in the real font if it's installed. Since Goudy Stout and Garamond come with Microsoft Office, they may be in luck. If the first-choice font isn't available, the browser displays the text using the second- or third-choice font (if they are installed). Users of older browsers see all the text displayed using their default font.

One thing to bear in mind is that symbol fonts appear as ordinary characters in browsers other than Internet Explorer 4.0—even CSS browsers do not display the symbols properly. For this reason, using symbol fonts in this way is recommended only for content specific to Internet Explorer 4.0.

Example 2: A blot on the copybook

Design process. This demonstration consists of four pages and shows how one font object can be used across any number of pages. The French Script MT font object contains all the letters and punctuation used in the story and is referenced by all four pages.

Unlike the characters used in the text of the story, the pictures only appear once. For this reason, four font objects were created, each one containing only the pictures used by the page that references it.

The third font is a custom font created specifically for this demonstration. The phrase "A Blot on the Copybook" was drawn as a single character using Macromedia Fontographer, and mapped to the letter Q. The phrase "fin" was also drawn and mapped to the letter K.
Font used   Unique characters   Object size  
French Script MT   52   11.1K  
Copyblot   2   4.23K  
Dingblots (p. 1)   3   2.56K  
Dingblots (p. 2)   27   8.42K  
Dingblots (p. 3)   17   5.47K  
Dingblots (p. 4)   13   3.57K  

How the page looks in other browsers. Like the previous demonstration, this uses an embedded symbol font. Two pages also use a custom font that maps the phrases "A Blot on the Copybook" and "fin" to the Q and K keys, respectively. Using custom and symbol fonts in this way means that the pages are Internet Explorer 4.0-specific.

Example 3: Typographic ornament

Design process. These pages use HTML tables to achieve checkerboard patterns, which are colored and filled with various symbols taken from the Border Web and Kingston inline fonts.
Font used   Unique characters   Object size  
Kingston Inline   36   17.1K  
Runic MT Condensed   33   9.85K  
BorderWeb   10   8.36K  

How the page looks in other browsers. Like the previous demonstrations, these pages also use embedded symbol fonts, making them Internet Explorer 4.0- specific.

Example 4: Progressive rendering

Design process. Internet Explorer 4.0 will not render a page until the font objects referenced by that page have been downloaded, decompressed, and temporarily installed. In some cases you might want to have a page displayed using an installed font that is dynamically replaced by the font stored within the font object.

The code required to implement this progressive rendering is very compact, and takes the following form: 

<SCRIPT LANGUAGE="VBSCRIPT">
Sub Window_onLoad
Msgbox("Click here to continue the demo")
document.stylesheets(<SPAN class=red>i</SPAN>).href="ftembed.css"
End Sub
</SCRIPT>

The stylesheets(<SPAN class=red>i</SPAN>) section is the element of the style sheet collection you want to replace. In this example, a null style sheet corresponding to stylesheets(0) is dimensioned so as to create a style sheet element. This requires the following code to be added in the HEAD element of your HTML code. 

<LINK rel=stylesheet href=null>

The font object links are contained in the external style sheet and are therefore referenced only after the page itself has downloaded. The Msgbox code has been inserted so that those lucky enough to have fast connections can see how the progressive rendering effect works. This line can be removed if you implement this code on your own pages.
Font used   Unique characters   Object size  
Braggadocio   18   3.16K  
Curlz MT   36   10.4K  
OCR A Extended   19   4.75K  
Gradl   23   4.08K  
Snap ITC   29   7.09K  

Limitations in Internet Explorer 4.0

At present Microsoft Internet Explorer 4.0 downloads, decompresses, and privately installs font objects even if the real font is installed on a user's system. Future versions will check if the real version of the font is available before downloading the linked font object. Currently this behavior has to be simulated using VBscript (Visual Basic® Scripting Edition) or JScript.

The W3C font embedding draft also describes the way in which browsers should be able to combine font objects containing different subsets of the same font. This way you could link to a font object that contains the uppercase letters from a particular font and another font object containing lowercase letters. At present Internet Explorer 4 uses only the first font object specified.

Internet Explorer 4.0 Security Alert

Depending on how Internet Explorer 4.0 security settings are set, you might get a warning every time a page accesses an embedded font. Although your security level settings can easily be modified, you should first access the Internet Explorer online help and read the sections discussing security before making the following changes:

  1. On the View menu, click Options and then click the Security tab.
  2. Select Custom and click Settings.
  3. Scroll down to the Downloads section.
  4. Change the Font Download setting from Prompt to Enable.

Using Microsoft WEFT

The Microsoft Web Embedding Fonts Tool is being released to coincide with the release of Internet Explorer 4.0. WEFT is a free utility that lets site designers create font objects that are linked to their Web pages.

Download the current version of WEFT for Windows® 95 and Windows NT® from the Microsoft Typography Web site.

The font objects created by WEFT differ from traditional font files in a number of ways. The font objects are compressed and are usually subsetted so that they contain only the characters used by a particular site or page. They are also privately installed by Internet Explorer 4.0 so that they can't be accessed by other applications, and they can't be linked to sites that don't have permission to use them. In the future, WEFT features will be built into popular Web authoring tools.

WEFT Style Code

WEFT adds a STYLE section to the HEAD part of each HTML page that uses one or more font objects. 

<STYLE TYPE="text/css">
  @font-face {
    font-family: Garamond;
    font-style:  italic;
    font-weight: normal;
    src: url(Garamond1.eot); }
</STYLE>

This code tells Internet Explorer 4.0 to use the Garamond1.eot font object whenever the Garamond Italic font is specified within the page. The browser will use the font object regardless of whether the font is specified using the FONT FACE tag, a linked or inline Cascading Style Sheet, or some other method.

Cascading Style Sheet Files

WEFT uses Internet Explorer 4.0 to determine the fonts and characters used on each page. If a page references a linked style sheet, this style sheet usually determines the fonts Internet Explorer 4.0 uses to display the page. Note that WEFT does not modify linked style sheets. Instead, the tool modifies the HTML pages by adding code that links the font objects to pages that require them.

In some cases it will be more efficient to reference the font objects within one or more linked style sheets. If you'd like to try this, skip the option asking if you want to publish the modified pages back to your Web site. Instead, cut and paste the relevant code from the modified pages (by default these will be stored in the My Documents folder) into your linked style sheet.

A word of caution is needed. As style sheets cascade, a font specified in a linked style sheet may be overridden by one specified inline. Also, because a style sheet can be linked to any number of pages, care should be taken when choosing an appropriate subsetting level.

For more information about Cascading Style Sheets, see Microsoft Site Builder.

Frequently Asked Questions

Q. Which fonts can I use?

There are thousands of TrueType fonts available, and most of these can be embedded within Web pages using the Microsoft Web Embedding Fonts Tool. However, WEFT will not let you embed certain categories of fonts, such as "no embedding" fonts, and those that contain serious errors.

Q. How can I check the embedding permissions of my fonts?

You can check the embedding permissions of any font using the Microsoft Font Properties Extension. WEFT also has a font check feature that reports the permissions of fonts you have installed on your system.

You may come across very old TrueType fonts, or converted Macintosh® TrueType fonts that do not have any embedding permissions encoded within them. WEFT treats these as "no embedding" fonts. In the unlikely event that you encounter such a font, your best option is to contact the foundry that created the font, and ask about an upgrade.

Q. Should I embed common core fonts such as Arial or Times New Roman?

WEFT will identify common fonts that your readers are likely to have installed. These include Windows core fonts such as Arial, Times New Roman, and Courier New. You can still embed these fonts; however, Internet Explorer 4.0 will download, decompress, and temporarily install font objects even if the real font is present on the user's computer.

The current version of WEFT does not identify the fonts supplied with Internet Explorer 4.0 as common core fonts. Users who have installed Internet Explorer 4.0 will have added Verdana, Comic Sans MS, Arial Black, Impact, and Webdings to their system. Although it is possible that a few users might remove these fonts from their system, it is not recommended that you embed them.

Q. Can I use Type 1 fonts?

If you have specified Type 1 fonts as your first-choice fonts and have Adobe Type Manager installed, these fonts will be identified by WEFT. However, they will be flagged as "status unknown", and you will not be able to embed them using the public preview version of WEFT.

Up Top of Page
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.