Fonts

Article
10/20/2016

Better typographic control has been a consistent feature of each new version of CSS. At the same time, the lack of an interoperable web font format can be frustrating.Windows Internet Explorer 9 introduced enhanced support for CSS fonts to provide compliance with the CSS Fonts Module Level 3 specification, as well as support for the Web Open Font Format (WOFF) and raw TrueType fonts. Internet Explorer 10 extends CSS3 Font support to include low-level control over OpenType layout features.

Font Properties

The font-weight property has been updated as of Internet Explorer 9 to calculate font weights as specified in CSS3 Fonts.

The font-size property has been updated so that each keyword's scaling factor is as defined in CSS Fonts Module Level 3. Also, keywords and HTML heading sizes are now mapped as specified.

The font-stretch property was introduced in Internet Explorer 9, and selects a normal, condensed, or expanded face from a font family. This property is also available as a @font-face rule descriptor.

The @font-face Rule

The @font-face rule enables font linking. That is, a style sheet can reference a specific font file for the browser to download and use. For instance, consider the following markup.

@font-face {
   font-family: MyFont;
   src: url(http://mysite/fonts/MyFont.ttf)
      format("embedded-opentype");
}
p {
   font-family: MyFont, serif;
}

In this example, the @font-face rule instructs the browser to go to the URL specified in the src descriptor to download the font file that contains the specified font. In Windows Internet Explorer 8 and earlier, the src descriptor was incorrectly ignored if it contained an optional format string, such as the one shown in the previous example. In Internet Explorer 9, the src descriptor is parsed as expected.

Internet Explorer 9 also adds support for the unicode-range descriptor, which enables you to specify the range of Unicode characters supported by a given font. For instance, the following code example specifies the range of basic ASCII characters.

@font-face {
    font-family: MyFont;
    src: url(http://mysite/fonts/MyFont.ttf);
    unicode-range: U+0-7F;
}

Web Font Formats

Microsoft created Internet Explorer 9 to maximize web font choice. To that end, we have done the following:

Ensured backward compatibility with continued support for Embedded OpenType (EOT)
Added support for the Web Open Font Format (WOFF), which repackages sfnt-based font files (TrueType, OpenType, and Open Font Format fonts) by compressing each table individually using a ZIP compression format
Added support for installable (no embedding permission bits set) raw TrueType fonts

Microsoft Edge supports the Web Open Font Format (WOFF) File Format 2.0 specification which provides an improved compression algorithm from WOFF 1.0. The font format "woff2" is supported.

Typographic Features

The font-feature-settings property, defined in Section 6.12 of the World Wide Web Consortium (W3C)'s CSS Fonts Module Level 3 specification, enables you to specify glyph substitution and positioning in fonts that include Microsoft OpenType layout features.

The OpenType specification defines many advanced typographic features that can be implemented by font designers. For instance, you can define vertical positioning for a font, substitute glyph forms with ligatures, contextual alternates, stylistic alternates, or swashes, include a set of small caps, and more.

Each defined feature has a corresponding feature tag that identifies its function and effects. Font developers can also define their own features. By examining a feature's tag, Internet Explorer 10 and Windows apps using JavaScript determine what the feature does and whether to implement it. The following table lists some of the most common feature tags and their definitions. The full list of OpenType layout features are listed in the OpenType layout feature tag registry.

Tag	Description
kern	Kerning
smcp	Small capitals
liga	Standard ligatures
dlig	Discretionary ligatures
ss01, ss02, ss03 ... ss20	Stylistic sets (font-specific)
swsh	Swash
tnum	Tabular figures
lnum	Lining figures
onum	Oldstyle figures

Note If you are unfamiliar with the font features listed in this table, the CSS Fonts Module Level 3 specification has good explanations and visual examples of each of these in Section 6, "Font feature properties." Be aware that, though the properties listed correspond to OpenType layout features that might be supported in Internet Explorer 10 and Windows apps using JavaScript, the properties themselves (font-kerning, font-variant-*, and so on) are not supported.

Implementing OpenType layout features

To use OpenType layout features, you must first be using a font that has one or more features included. For more information about enabling advanced type design, including font linking and supported font formats, see How to Enhance Your Website's Type Design with CSS3.

After you've set up font linking using a font that has OpenType layout features built in, you implement these features using the font-feature-settings property. In Internet Explorer 10 and Windows apps using JavaScript, the syntax for this property is as follows, where "feat" represents an OpenType layout feature tag:

font-feature-settings: "feat" 1;

The "1" value following the feature tag is a Boolean toggle. If no value is specified, the declaration is treated as if a "1" followed the tag. A "0" value toggles the tag off.

For instance, if you wanted to enable discretionary ligatures on a font that includes them, you would apply the following declaration to the appropriate selector:

font-feature-settings: "dlig" 1;

To implement multiple OpenType font features on a selection of text, you simply list each corresponding tag and its toggle, and separate them with commas.

font-feature-settings: "dlig" 1, "ss02" 1, "case" 1;

At this writing, the only other browser to support OpenType layout features is Mozilla Firefox, and its syntax is slightly different from the one supported in Internet Explorer 10 and Windows apps using JavaScript. For more information, see CSS Reference: Mozilla Extensions. Be aware that, as CSS Fonts Module Level 3 is developed, its syntax might change.

Note The version of this property using a vendor prefix, -ms-font-feature-settings, has been deprecated. To ensure compatibility in the future, applications using this property with a vendor prefix should be updated accordingly.