treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Accessing alternates and swashes in a webfont (OpenType font features)

  • Hi all,

    I'm trying to use some OpenType font features for the first time, and I've run into a problem. Basically, I purchased a font (Samantha Pro) with a ton of extra alternates, swashes, ligatures, etc.—but I have no idea how to find these extra characters in the font itself. I think understand the syntax for font-feature-settings (after reading up on it here, here, and here), but I can't figure out to actually find the extra characters in the font itself.

    As an example:

    The Samantha Pro font contains a number of alternate "O" characters. It's my understanding that in order to access one of these alternates, my CSS should look something like this:

    
    
    /* enable style set five */
    .alternates {
        -moz-font-feature-settings: 'ss05=1';
        -ms-font-feature-settings: 'ss05' 1; 
        -webkit-font-feature-settings: 'ss05' 1; 
        -o-font-feature-settings: 'ss05' 1;
        font-feature-settings: 'ss05' 1;
    }
    
    
    

    But how do I find out which style set is associated with which character? Is there some program I can use? How does one browse the style sets associated with a particular font (short of just trying random numbers until something works)?

    Thanks in advance for any help.

  • For what it's worth, I've found a web app that is helpful in identifying a font's available opentype features:

    http://clagnut.com/sandbox/css3/

    Marking as solved, but if anyone comes across this and has another solution/suggestion, please chime in.

  • sweet, i was looking for something just like this a few days ago! thanks for the link, predde!

  • Here's another (click Opentype features): http://www.impallari.com/testing/