How do I access font features in CSS?

Question

I have a font that I wish to use on a website, and I need to access the various alternate font features (specifically, the features selected here: http://myfonts.us/uOmsiF).

I know mozilla has the -moz-font-feature-settings css feature, BUT I need two more things:

1. a way to do this for webkit browsers (if possible, support for recent IE versions);
2. how to work out what I should be putting as the value for the -moz-font-feature-settings properties (Is there a tool? A standard?).

I prefer to use CSS solutions, but if there is some other, javascript-based way that is likely to work on most platforms, I would definitely use that.

Edit:I just found the OpenType spec: http://www.fontfont.com/opentype/FF_OT_UserGuide_v2.pdf and also the CSS3 draft: http://dev.w3.org/csswg/css3-fonts/#font-variant-alternates-prop Edit 2: My solution was to create the text in xelatex, then convert that to SVG. Obviously, this wouldn't be a solution for a lot of text, but works well for a text logo.

Answer 1

Currently, no browser except Firefox 4 supports font-feature-settings (and even then it uses the Mozilla vendor extension). The CSS3 Fonts module documents that property, though, so since it's a part of CSS3, other browsers should support it eventually.

I'm not sure of any JavaScript-based solutions.

Answer 2

The font-feature-settings stuff is now actually supported in WebKit https://bugs.webkit.org/showdependencytree.cgi?id=63796&hide_resolved=1 though not yet on OSX https://bugs.webkit.org/show_bug.cgi?id=69826#c0

And now in IE/Trident as well (IE10 platform preview).

Yay for being able to do real typography on the Web.

Answer 3

As stated by sideshowbarker, CSS font-feature-settings are now widely more supported. They can be done with all the well known vendor prefixes:

• -webkit- (Google Chrome)
• -moz- (Mozilla Firefox)
• -ms- (IE 10+)
• -o- (Opera)

Unfortunately, they are not supported by Safari just yet. They also aren't supported in IE 9 and down. As of November 26, 2012, this would make the browsers that don't support it around 34% according to StatsCounter. This is a pretty big margin, but it's going down all the time.

Personally, I would use an image instead of font right now. 34% of something is a pretty large amount. If I was shopping and found a pie that 34% of people who ate it didn't like it, I wouldn't buy it.

However, if you really want to use font-feature-settings then I recommend this article by Font Deck or this one that actually the features in action.

Although it seems like you already answered your question, I just thought I would expand on this topic. sideshowbarker had some great points, but I thought they just needed some clarification (and if I only had 15 reputation I would vote you up, bro!)