Getting different figure types with Google Web Fonts

Question

According to this page:

[Raleway] is a display face and the download features both old style and lining numerals,

Answer 1

If you want to download the font and generate a new version with lining numerals, or other OpenType features, check out http://www.fontsquirrel.com/tools/webfont-generator.

You'll need to enter Expert mode, but then under OpenType Flattening you can select Lining Numerals. If you are so inclined, you could even generate a version with the alternate W form.

As of late 2014, this is the only way to get lining numerals in Safari.

Answer 2

You cannot use OpenType features with Google Web Fonts unless you self host or use a different CDN. Google Web Fonts CDN subset out features to improve latency.

https://github.com/google/fonts/issues/1582

Answer 3

To follow up on wbond's answer, which should take all the credit for this post, the expert mode in font squirrel will look intimidating at first. But he mentioned the ever important alternate W, which is a pretty big difference for raleway. Note the G is also different between styles.

You simply put "salt" in the OpenType Features box and download your kit.

Then wherever you want to access the salt style, you add this to the css:

    -moz-font-feature-settings:"salt" 1; 
    -ms-font-feature-settings:"salt" 1; 
    -o-font-feature-settings:"salt" 1; 
    -webkit-font-feature-settings:"salt" 1; 
    font-feature-settings:"salt" 1;

Sorry, this should be a comment on that answer but I can't add an image to comments. It would have saved me some time if someone else had this image to show me, so I felt it was worth posting.

Answer 4

From this page: http://clagnut.com/sandbox/css3/

.lnum {
    font-variant-numeric: lining-nums;
    -moz-font-feature-settings:"lnum" 1; 
    -moz-font-feature-settings:"lnum=1"; 
    -ms-font-feature-settings:"lnum" 1; 
    -o-font-feature-settings:"lnum" 1; 
    -webkit-font-feature-settings:"lnum" 1; 
    font-feature-settings:"lnum" 1;
}

Only works with .otf files for now, not with font embeds hosted by google webfonts. Not supported in Safari. You can test other typeface features and browser support here: https://www.typotheque.com/articles/opentype_features_in_web_browsers_-_tests