Using OpenType Features with Fonts.com Web Fonts

OpenType is a modern font format that provides designers typefaces that can include extended capabilities and comprehensive character sets. Ranging from the functional to purely stylistic, OpenType features can help bring your Web typography to the next level.

Here are some common OpenType features that are available:

Using our JavaScript publishing option, OpenType features allow you to provide your clients with professional Web typography tailored exactly to their specific style. Also, a great feature of the Fonts.com Web Fonts service is that our technology allows these advanced typographic features to be seen even in older web browsers that don’t natively support OpenType—providing type that’s viewable to your client’s entire audience as you intended it to look.

Finding OpenType Fonts & Adding Them to Your Project

The first step in using OpenType features is to find the right font—not all fonts we offer through our service are available with OpenType features, so you’ll want to filter your results when searching for those to use in your projects.

While on the “Web Fonts” tab from any search results, click on the plus icon next to the search field and select “OpenType Support.” The secondary menu to the right will also allow you to refine your results further based upon the specific character sets that can be paired with that font’s OpenType features.

Once you have found an OpenType feature-enabled font you’d like to use, you’ll need to add it to your project. If you’re logged into your account you can add fonts to your project through the “Web Font” button and tab through search results, font family pages or product pages.

An important reminder: When adding your font, to your project, under “Choose Language Support” make sure that you choose a character set that features “ + OT Features” in its name.

OpenType Features Tab

Using the Basic Tab

Once you’ve added the font to your project, it’s time to head over to the Manage Web Fonts page. Expand the project that you have added your OpenType featured fonts to, and click the the “Add & Edit Fonts” link. From the window that appears click the “OpenType Features” tab. This will be your command center for working with OpenType features in your project.

The first step in working with the “OpenType Features” tab is to create selectors for your project. A selector is a component of code that identifies a certain element or area on your page, which you can then assign specific fonts to. Some basic selectors you may have seen before include h1, h2, p, and b.

First, in the “Create a selector” field, give your selector a name. Then from the “Choose a font” drop down menu, select the specific font weight or style you want to assign to that selector. Click “Add” and you’ll see your selector appear in the lefthand column of the window.

Once you’ve done this you’ll be able to fine tune your type. To start, click on one of your created selectors—you will then see a row of icons corresponding to the specific OpenType features available for that selector’s font. (For information on each feature, just hover over its icon for a detailed description.)

Clicking the icon of any OpenType feature will then apply it to your selector. To get a feel how each OpenType feature will affect your font, use the text box below to enter sample text. You can mix and match options until you find the all features you’d like to include. Choose as many or few as you’d like—your project’s file size won’t increase.

Using the Advanced Tab

If you’d like to further customize an individual block of text, you can click on the “Advanced” tab. Here you will see options to adjust the size, line height, and alignment of text you’ve inputted. (You’ll also see options for kerning controls too—we’ll cover those in depth in an upcoming mailing.)

Here you can also choose to apply OpenType features to specific words, letters, or letter pairs, giving you the ability to fine tune the look of your text. OpenType feature icons will be highlighted if they are available for the text you’ve selected—just click the icons you want to activate the corresponding features. Once you’ve experimented and are satisfied with how your text looks, click the “View HTML” button to display the custom code snippet for your site. Just add it to your site to achieve the custom OpenType features you’ve created.