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 are 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 Microsoft PowerPoint for several years. It enables fonts used in the creation of a document to travel with that document, ensuring that a user sees the pages exactly as the author intended. 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 see their pages exactly as intended.

• Embedded Font Technology
• Different Levels of Font Embedding
• Embedded Font Examples
• Limitations in Internet Explorer 4.0
• Internet Explorer 4.0 Security Alert
• Using Microsoft WEFT
• WEFT Style Code
• CSS Files
• Frequently Asked Questions

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 object and Cascading Style Sheets (CSS) font-family property was introduced to provide 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 Web 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, which allows you 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 technology for TrueType font embedding is one proposed implementation. For a working draft of the latest proposed specifications, see the World Wide Web Consortium: Font Embedding Submission .

Microsoft font embedding uses CSS notation to indicate font styles in Web documents. Designers can limit the frequency with which 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> 
@font-face {font-family: "MyFont"; src: url(FontSourceFile.eot)}
H1 {font-family: "Verdana", "MyFont"}
</STYLE>

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 font embedding:

• No-embedding permissions are used by a small proportion of available fonts. The creators of these fonts have decided not to allow embedding. Some foundries set their fonts to no-embedding, but offer upgrades to embeddable versions. If you come across a no-embedding font that you would like to use, contact the supplier and ask about a possible upgrade.
• Print and preview fonts can be embedded, but only within pages that remain static on the client side. If a page allows client-side interaction that results in content displayed using the font changing, "editable" or "installable" fonts must be used. An example of such a page might be one that contains an inline Java-based word processor, or an e-mail editor.
• Editable fonts can be embedded using a tool such as Microsoft Web Embedding Fonts Tool (WEFT) without the restrictions imposed on "print and preview" fonts.
• Installable fonts are treated as editable fonts by Internet Explorer 4.0. Installable fonts are not installed in your visitors' fonts folder. The main reason for this is that during the course of users' Web travels, they could easily find their fonts folder stuffed with hundreds of full and subsetted fonts that they do not want or need.

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.

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. CSS 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 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 CSS code that links the font objects to that page. If you use View Source on the demonstration page, you'll see the format of the code that was added.

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

The preceding code instructs 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.

How the page looks in other browsers. Browsers that don't support font embedding ignore the code that links the font objects to the page. Users of browsers that support CSS see text displayed in the real font, if it's installed. Since Goudy Stout and Garamond come with Microsoft Office, they might be in luck. If the first-choice font isn't available, the browser displays the text using the second- or third-choice fonts, 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 to use one font object 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 appear only once. For this reason, four font objects were created, each 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.

How the page looks in other browsers. Like the preceding demonstration, this one 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 specific to Internet Explorer 4.0.

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.

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

Example 4:   Progressive Rendering

Design process.Internet Explorer 4.0 does not render a page until the font objects referenced by that page are 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="JavaScript">
function createbreak() {
alert("Click here to continue the demo");
document.styleSheets(0).href="ftembed.css";
}
</SCRIPT>

The "styleSheets(0)" section of the preceding code 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 you to add the following code in the head object 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 is downloaded. The alert code has been inserted so that users with fast connections can see how the progressive rendering effect works. You can remove this line of code if you implement it on your own pages.

Limitations in Internet Explorer 4.0

Currently, Internet Explorer 4.0 downloads, decompresses, and privately installs font objects even if the real font is installed on a user's system. This behavior has to be simulated using Microsoft Visual Basic Scripting Edition (VBScript) or Microsoft JScript.

The World Wide Web Consortium (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 can 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.0 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 receive a warning every time a page accesses an embedded font. Although your security level settings can easily be modified, you should first access the Windows Internet Explorer online help and read the sections discussing security, before making the following changes.

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

Using Microsoft WEFT

The Microsoft WEFT 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.

You can download the current version of WEFT for Microsoft Windows 95 and Windows 2000 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 so that they can't be linked to sites that don't have permission to use them.

WEFT Style Code

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

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

The preceding code instructs Internet Explorer 4.0 to use the Garamond1.eot font object whenever the Garamond Italic font is specified within the page. The browser uses 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.

CSS 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. 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 is more efficient to reference the font objects within one or more linked style sheets. If you'd like to try this, skip the option that asks you 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 are 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 might be overridden by one specified as 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 CSS, see the CSS Attributes: Index

Frequently Asked Questions

Q. Which fonts can I use?

Thousands of TrueType fonts are available, and most can be embedded within Web pages using WEFT. However, WEFT does 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-checking feature that reports the permissions of fonts installed on your system.

You might come across 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 identifies 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 downloads, decompresses, and temporarily installs 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 have Verdana, Comic Sans MS, Arial Black, Impact, and Webdings added 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 are identified by WEFT. However, they are flagged as "status unknown", and you cannot embed them using the public preview version of WEFT.