OpenType Feature Support Now Possible in Nearly Any Browser

The fact that all major Web browsers now support Web fonts is of course a great step forward for typography on the Web. However, not all Web browsers support the ability to use advanced typographic  features that are part of OpenType fonts, such as standard and discretionary ligatures, contextual alternates, small caps, fractions, swashes  and more. For this reason, it is important to know that OpenType font support is different from OpenType feature support.

OpenType fonts are supported by wrapping them into a WOFF container, or sometimes directly without the WOFF container.

The following example demonstrates text with and without standard ligatures.

 The next example uses discretionary ligatures on the common ‘st’ letter combination.

The text strings and character codes in the HTML stay the same no matter what OpenType features are used or not used. Instead, these features are simply controlled with the style, typically from the CSS file .

Unfortunately, the support for OpenType substitution features is not yet broadly available in Web browsers. The good news is that nearly all of the most recent releases of browsers offer some level of support for OpenType features or are expected to add support soon. This means that Web browsers are moving in the right direction. However, as of now, good support is missing from the most commonly used browsers. Moreover, it takes years to flush out old browsers from the market. All this has prevented the wide use of these OpenType features on the Web, until now .

Monotype is pleased to announce the beta release of a new cloud font technology solution within the Fonts.com Web Fonts service that makes it possible to immediately use these features in any browser that supports Web fonts.  For browsers that do not have solid support for OpenType substitution features, the cloud takes the information from the GSUB table in the font and compiles it into compact JavaScript code that these browsers can handle. The JavaScript code automatically transforms the glyph shapes into new, beautiful and typographically correct shapes.

As a Web designer, you can simply use standard CSS techniques for controlling these OpenType features, while relying on our service to ensure the page renders beautifully and as intended no matter what browser the visitor is using.

To use this capability, sign in to your Fonts.com Web Fonts account and follow these steps

1. Add one of the fonts listed here to a project. Be sure to select the version containing OT Features in the name. This list will grow rapidly, but for now, it will provide you with a few options to play around with.
2. Open the Add & Edit Fonts control within your project on the Manage Web Fonts page.
3. Click the OpenType Features tab and Use the Selector field to enter the names of the CSS selectors you would like to display using a font containing OpenType features.
4. Choose the font containing OpenType features from the Select a font dropdown menu.
5. A list of icons representing the OpenType features contained in the font will appear.
6. Click the icon of any OpenType features you would like to use on your website.
7. The preview text will change based on the OpenType features you select. (If nothing happens, modify the sample text in the ‘Test your own text here’ field to ensure your text string contains the necessary characters.
8. Publish your project.

Check out this technology and start using OpenType features on the Web!