CSS Corner: Using the Whole Font

With cross-browser support for both the CSS3 @font-face rule and the WOFF font packaging format, modern Web typography has expanded far beyond the realm of ‘Web-safe fonts.’ Well-known magazines such as the New Yorker use Web fonts to preserve the typographic personality of their headlines, while [US] President Obama’s re-election campaign uses Web font service Typekit to host their identity font.
One remaining limitation prevents Web designers from using the entire font: the inability to access the large variety of optional OpenType® features built into many fonts. These features define glyph substitution and positioning options to support fundamental typographical features such as kerning, superscript and subscript, contextual letterforms such as ligatures, numeral styles, access to alternate East Asian glyphs as well as ornamental swashes.
For instance, an OpenType “stylistic set” built into Gabriola allows this text:

…to render as:

Recent updates to the CSS3 Fonts module include a new set of properties to expose these OpenType features within CSS. These properties can be grouped in two broad categories:

• An explicit mapping of the common OpenType features to specific properties and values. For example font-kerning:normal applies the kerning pair adjustments encoded within the font and font-variant-numeric: tabular-nums enables tabular numerals.
• The font-feature-settings property enables low-level access to all the OpenType features supported by a font. It is meant as an ‘escape hatch’ to access to more advanced features in less common use-cases.