How Do I Use the OpenType Features Tab On the Add & Edit Fonts Control?

Fonts.com Web Fonts has released a technology that will allow you to specify OpenType features (ligatures, fractions, alternate characters, etc.) contained within your Web fonts directly through the Fonts.com Web Fonts portal. Even better, the technology allows OpenType features to be displayed, even in legacy browsers without native OpenType feature support.

To use this capability, follow these steps:

Add one of the fonts below 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.
Open the ‘Add & Edit Fonts’ control within your project on the Manage Web Fonts page.
Click the OpenType Features tab.
Choose the basic tab for an easier implementation that applies OpenType features to all text associated with a CSS selector. Choose the advanced tab to use OpenType features on a targeted selection of text or to use the text editor.

Using the basic tab

Use the Selector field to enter the names of the CSS selectors you would like to display using the font with OpenType features.
Choose the font containing OpenType features from the Select a font dropdown menu.
A list of icons representing the OpenType features contained in the font will appear.
Click the icon of any OpenType features you would like to use on your website.
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.
Publish your project.

Using the advanced tab

Choose the font containing OpenType features from the Select a font dropdown menu.
Enter the text that you want to use OpenType features within the “Test your own text here” field.
Select the text that you want to apply OpenType features to.
A list of icons representing the OpenType features contained in the font will appear.
Click the icon of any OpenType features you would like to use on your website.
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.
Use the size, line height, alignment, color and other style options to customize the appearance of your text as desired.
Click the view HTML button.
The code necessary to display your text sample will be displayed. Use this code in your own CSS or HTML to incorporate your text sample or use it as a starting point when building your CSS or HTML.
Publish your project.

To use this capability, you must choose the JavaScript publishing option and a font containing OpenType features. Below is a list to help get you started. You can also filter search result to show only those containing OpenType features. When adding to your project, choose the variation containing “OT Features” in the name.