How can I call 'Swash'/'Stylistic Set' Characters from an OpenType font in HTML?

Question

I'm working on a project right now that within the OpenType font has several variations of the same character. All the characters have the same Unicode ID but have different GID numbers and some other reference like Swash or Stylistic SetXX (ss01) (found this information in indesign). Is there any way to use these characters in an HTML document?

Example: J (normal), J (with speed blur), J (made out of chains), All have unicode id: 004A, but have GID values of 43, 206 and 233 respectively.

Answer 1

I hadn’t heard of font-variant-alternates, but I do know that Firefox 4 and above support -moz-font-feature-settings, which lets you apply OpenType features via CSS.

Example code from a Mozilla Hacks blog post on moz-font-feature-settings:

.altstyles {
    /* format: feature-tag=[0,1] with 0 to disable, 1 to enable */
    /* dlig = discretionary ligatures, ss01 = stylistic set 1 */
    -moz-font-feature-settings: "dlig=1,ss01=1";
}

As far as I know, no other browser supports a similar feature yet.

Answer 2

font-variant-alternates is what you want: http://www.w3.org/TR/css3-fonts/#font-variant-alternates-prop

I don't know how widely supported it is yet, and bet that it's not in IE.

This page shows support for OTF in general: http://caniuse.com/#feat=ttf ; It is not clear whether complete support is really complete, in this sense.

Demos of Firefox and IE support: http://ie.microsoft.com/testdrive/Graphics/opentype/opentype-fontfont/index.html