Search code examples
fontscssfont-face

How do I access font features in CSS?

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.

Solution

  • 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.