Getting different figure types with Google Web Fonts

aendrew picture aendrew · Jun 20, 2013 · Viewed 10.1k times · Source

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!

Answer

jcummins picture jcummins · Jun 20, 2013

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