Geek Answers Handbook

How to access font functions in CSS?

I have a font that I want to use on a website, and I need to access various alternative font functions (in particular, the functions selected here: http://myfonts.us/uOmsiF ).

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

  • a way to do this for webkit browsers (if possible, support for the latest versions of IE);
  • how to work out what I should put as a value for the properties -moz-font-feature-settings (is there a tool? Standard?).

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

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

+8
css fonts css3 font-face
source share
3 answers

Currently, no browser other than Firefox 4 supports font-feature-settings (and even then it uses the Mozilla provider extension). The CSS3 Fonts module documents this property, however, since it is part of CSS3, other browsers must support it in the end.

I am not sure about any JavaScript based solutions.

+6
source share

The content of the parameter font is now actually supported in WebKit https://bugs.webkit.org/showdependencytree.cgi?id=63796&hide_resolved=1 , although 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 the opportunity to do real typography on the Internet.

+4
source share

As pointed out by sidehowbarker, CSS font-feature-settings now widely supported. They can be performed with all known vendor prefixes:

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

Unfortunately, they are not yet supported by Safari. They are also not supported in IE 9 and below. As of November 26, 2012, this would make browsers that do not support it about 34% according to StatsCounter. This is a fairly large supply, but it is constantly decreasing.

Personally, I now use an image instead of a font. 34% of something is quite a lot. If I shopped and found a pie that 34% of the people who ate it didn’t like it, I wouldn’t buy it.

However, if you really want to use font-feature-settings , I recommend this article on Font Deck or this one , which is actually functions in action.

Although it seems that you have already answered your question, I just thought that I would expand this topic. Sidehowbarker had some great points, but I thought they just needed some clarification (and if I had only 15 reps, I would vote for you, brother!)

+4
source share

More articles:


All Articles