You should see characters alternating between regular and bold if the 'calt' feature is active.

You can download the used webfont (derived from Droid Sans, Apache-licensed).

This example (developed by Adam Twardoch on 2012-12-03) enables the 'calt' feature through the font-feature-settings descriptor within the @font-face rule. This works in Firefox and Safari 5.

In addition, it enables 'calt' through the -ms- and -webkit- variants of the font-feature-settings property in the h1 element. These are necessary to make it work in Chrome, Safari 6 and IE 10, although they actually should not be required (the descriptor in the @font-face rule alone should be sufficient). The CSS used is shown below.

Specifically, this example works in: Firefox 12 on Windows 7, Firefox 16 on Mac OS X 10.6, Safari 5.1.7 on Mac OS X 10.6, Safari 6.0.2 on Mac OS X 10.7, Chrome 23 on Mac OS X 10.6, Chrome 23 on Windows 7, Chrome 25.0.1346.0 canary on Mac OS X 10.6, Internet Explorer 10 November 2012 Preview on Windows 7.

Switch versions: [ Spec-compliant descriptors | Fix for Chrome and IE10 | Selectors only ]

@font-face {
    font-family: 'calttest';
    src: url('calttest121203.eot');
    src: url('calttest121203.eot?#iefix') format('embedded-opentype'),
         url('calttest121203.woff') format('woff'),
         url('calttest121203.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    -moz-font-feature-settings: "calt=1";
    -moz-font-feature-settings: "calt" 1;
    -ms-font-feature-settings: "calt" 1;
    -webkit-font-feature-settings: "calt" 1;
    -o-font-feature-settings: "calt" 1;
    font-feature-settings: "calt" 1;
}

h1 {
    font-family: 'calttest';
    font-weight: normal;
    font-style: normal;
    -ms-font-feature-settings: "calt" 1;
    -webkit-font-feature-settings: "calt" 1;
}