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, standard and discretionary ligatures, a pretty complete set of diacritics, as well as a stylistic alternate inspired by more geometric sans-serif typefaces than its neo-grotesque inspired default character set.

(Emphasis mine)

The default for numerals is "old style" ("onum" OpenType feature string), which look pretty awful when used in headlines. Ideally, I'd like to be able to use the "lining" variant ("lnum"), with "tabular" ("tnum") kerning (As opposed to proportional -- "pnum").

I've tried using the following block of font-feature-settings declarations, to no avail:

font-feature-settings: "onum" off, "pnum" off, "lnum" on, "tnum" on;
-moz-font-feature-settings: "onum=0, pnum=0, lnum=1, tnum=1";       /* Firefox */
-webkit-font-feature-settings: "onum" off, "pnum" off, "lnum" on, "tnum" on;  /* WebKit */
-o-font-feature-settings: "onum" off, "pnum" off, "lnum" on, "tnum" on;       /* Opera */

Any thoughts? If I wanted to download the full font and then re-export it as a web-font, how would I do so while ensuring I get the lining figures?

Thanks!

Comment

Please be aware that there has never been support for -o-font-feature-settings in Presto. By switching to Blink Opera 15 started supporting -webkit-font-feature-settings. – Peroxidase

Answered comprehensively and more correct here: https://mcmap.net/q/707843/-font-feature-settings-what-is-the-correct-syntax – Peroxidase

Answer 1

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

Nerynesbit

this actually now works (with google web fonts) in FF 28 (nightly) & Chrome 33 (canary). Not in Safari 7 … – Anodize

this works great, BUT when you place it inside an element that has FLOAT LEFT or DISPLAY INLINE BLOCK, it throws off the fonts and makes the text go on top of each other. Does anyone one know why? or a workaround? – Superheterodyne

@DiegoCamacho noticed this too. I think it's too bleeding edge for Chrome/Safari... fonts that lack the features (or something else I cannot identify) cause all kinds of curious behavior. When I have onum enabled, selecting text causes this reverse-direction madness. – Communion

Answer 2

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.

Ptisan

Font Squirrel seems to have been updated: There's an option to keep all features now...it's awesome. – Etherize

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.

Haff

Answer 4

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

Rescind