Grow your CSS skills. Land your dream job.

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

  • # February 20, 2013 at 2:36 pm

    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.

    # February 24, 2013 at 1:55 pm

    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.

    # February 24, 2013 at 4:14 pm

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

    # February 24, 2013 at 9:39 pm

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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".