About Font Embedding

Unlike traditional print-based designers, Web page designers are limited to specifying fonts installed on a user's computer. This effectively limits the fonts that can be used on a Web page to those that are typically installed on a user's computer. For many designers, this is a problem because few fonts are consistently installed on users' computers. The Microsoft OpenType and TrueType specifications provide a solution to this problem, document font embedding.

Font embedding has long been a feature of Microsoft applications, such as Microsoft Word and Microsoft PowerPoint. It enables fonts used in the creation of a document to travel with that document, which ensures that a user views the document exactly as the author intended. Windows Internet Explorer has supported embedded fonts since Microsoft Internet Explorer 4.0.

• Embedded Font Technology
• Different Levels of Font Embedding
• Embedded Font Examples
• Internet Explorer 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 the fonts used to display content and users were able to override the defaults fonts and specify alternate choices. Later, the font object and Cascading Style Sheets (CSS) font-family property was introduced to allow Web designers more control over the appearance of their content. For example, the font-family property lets designers specify a prioritized list of fonts for the browser to use to display content. If the preferred font is not installed on the user's computer, the browser will attempt to use the second font in the list. If the user does not have of the preferred fonts installed, a default font is used to display the content.

Internet Explorer supports font embedding, which allows fonts to be temporarily installed on a user's computer so that a Web page is displayed exactly as the Web designer intended.

Although the mechanism to specify fonts is defined by CSS, the font format itself is not called out. In conjunction with the font community, Microsoft adapted the embedding technology used by Microsoft Office for use on the Web, creating the Embedded OpenType (EOT) font format. Based on OpenType, the EOT format encapsulates a font and binds it to a specific web page or site. This meets the OpenTypedefinition of document font embedding.

The EOT format has been documented and submitted to the World Wide Web Consortium (W3C). For more information, see Embedded OpenType (EOT) File Format.

Different Levels of Font Embedding

OpenType and TrueTypefonts include permissions defined by the original publisher of the font to detail when and how a may be embedded in a document. The OpenType and TrueType specifications define four primary levels of font embedding:

• Print and preview fonts can be embedded in a document, provided the user reading the document cannot edit the content of the document.
• Editable fonts can be embedded within content that can be edited by the user.
• Installable fonts within a document may be permanently installed by the user reading the document or a client application. In practice, installable fonts are treated like editable fonts by most client applications.
• No embedding permissions prevent fonts from being embedded in a document and are used by a small proportion of available fonts.

Most fonts are licensed from their original publishers, who may place additional restrictions on their use and distribution. For information about licensing arrangements for a given font, contact the original publisher.

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. This page 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. Those using browsers that support font embedding will see text displayed in the selected font if it's installed. Since Goudy Stout and Garamond come with Office, it's possible the fonts may be installed. 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—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.

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.

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.

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.

Internet Explorer Security Alert

Depending on how Internet Explorer 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 Internet Explorer online help and read the sections discussing security.

The Font Download security setting allows you to control the behavior of this dialog box for each security zone. For more information, seeURL Security Zones.

• 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 a free utility that lets site designers create font objects that are linked to their Web pages.

The font objects created by WEFT differ from traditional font files in a number of ways. The font objects are compressed and usually only contain the subset of characters used by a particular site or document. Font objects are privately installed by Internet Explorer so that they can't be accessed by other applications or by Web sites that do not 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 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 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 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 character subset.

For more information about CSS, see the CSS Attributes: Index

Frequently Asked Questions

Q. Which fonts can I use?

WEFT supports OpenType and TrueType fonts in the TrueType formet. However, WEFT does not let you embed certain categories of fonts, such as those with no embedding permissions or fonts containing 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 original publisher of the font and ask about an upgrade.

In addition, fonts are typically published with certain restrictions regarding use and distribution. The original publisher can provide detailed information regarding licensing requirements and opportunities.

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.