fonts.com blog
Posts Tagged ‘OpenType Features’

by Sampo Kaasila

Last week we announced the availability of a technology that allows Web designers to use OpenType features more easily and reliably. The technology which is incorporated into our Fonts.com Web Fonts service ensures that OpenType features such as ligatures, fractions and alternate characters are rendered, even when a visitor’s browser does not inherently support OpenType features.

If you’re new to OpenType features, have a look at this demo page . Simple on / off buttons allow you to preview text with and without the use of OpenType features, helping to illustrate the impact they can make.

We’re charting new territory with this capability. As such, we consider this an experimental feature and hope that you can provide us with your feedback to help us evolve it.

When you’re working on your project, the OpenType Feature control appears on the Add & Edit Fonts utility if your project contains a font with OpenType features. If you’ve had a chance to try it out, you’ll now notice that the tools introduced last week have been placed on a basic tab. Here you can activate OpenType features for a particular CSS selector. The first of our enhancements to the technology can be found on an advanced tab. This tab can be used to specify which portions of your text you want to apply OpenType features to, instead of turning them on or off for all text associated with a particular CSS selector. The advanced tab also features a simple online text editor to streamline the creation of Web content using these features.

The editor works inside the browser so you do not have to install anything. It shows what the text will look like as it is being edited, and it helps you see what features are available in the selected font and what features are available in the selected text.

This example shows the Fonts.com Web Fonts OpenType Feature control and illustrates use of ligatures and fractions. The code below was output from the text editor while creating the example shown below. This code may be a handy starting point when building your CSS or HTML, or when using OpenType features for targeted blocks of texts.

We’ve also been hard at work releasing more OpenType fonts for you to use. You can now refine Web font search results to display just those containing OpenType features as shown below. We’ve also provided a list of great choices here to help you get you started using OpenType features on the Web.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://fast.fonts.com/jsapi/74c1c08e-9c2a-4701-8328-4748e42bc503.js"></script>

<style>
.class-with-otf-main {
font-family: Ayita W03 Black; line-height: 01.5em;text-align:left;
}

.class-with-otf-0 {
font-size: 03.0em;
color: rgb(0, 0, 0);
text-decoration: none;
–moz-font-feature-settings : ‘dlig= 1′,‘calt=0′;
–moz-font-feature-settings : “dlig” 1,“calt” 0;
–webkit-font-feature-settings : “dlig” 1,“calt” 0;
–ms-font-feature-settings : ‘dlig= 1′,‘calt=0′;
–o-font-feature-settings : “dlig” 1,“calt” 0;
font-feature-settings : “dlig” 1,“calt” 0;
}

.class-with-otf-1 {
font-size: 03.0em;
color: rgb(0, 0, 0);
text-decoration: none;
}

.class-with-otf-2 {
font-size: 03.0em;
color: rgb(0, 0, 0);
text-decoration: none;
–moz-font-feature-settings : ‘liga= 1′,‘calt=0′;
–moz-font-feature-settings : “liga” 1,“calt” 0;
–webkit-font-feature-settings : “liga” 1,“calt” 0;
–ms-font-feature-settings : ‘liga= 1′,‘calt=0′;
–o-font-feature-settings : “liga” 1,“calt” 0;
font-feature-settings : “liga” 1,“calt” 0;
}

.class-with-otf-3 {
font-size: 03.0em;
color: rgb(0, 0, 0);
text-decoration: none;
}

.class-with-otf-4 {
font-size: 03.0em;
color: rgb(0, 0, 0);
text-decoration: none;
–moz-font-feature-settings : ‘frac= 1′,‘calt=0′;
–moz-font-feature-settings : “frac” 1,“calt” 0;
–webkit-font-feature-settings : “frac” 1,“calt” 0;
–ms-font-feature-settings : ‘frac= 1′,‘calt=0′;
–o-font-feature-settings : “frac” 1,“calt” 0;
font-feature-settings : “frac” 1,“calt” 0;
}

.class-with-otf-5 {
font-size: 03.0em;
color: rgb(0, 0, 0);
text-decoration: none;
}

</style>
</head>
<body>
<div><span>st</span><span>acks of wa</span><span>ffl</span><span>es</span><span>1/2</span><span>off</span></div>
</body>
</html>

 


by Sampo Kaasila

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.

standard ligatures

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

discretionary ligatures

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.

Fonts.com Web Fonts OpenType Features Control

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!

Great type makes sites stand out