Getting different types of shapes with Google Web Fonts

Question

According to this page :

[Raleway] is the face of the display, and the boot functions are the old style and lining , standard and discretionary ligatures, a fairly complete set of diacritics, as well as a stylistic alternative inspired by more geometric sans-serif fonts than its neo-grotesque breath default character set.

(Emphasis mine)

The default value for numbers is the "old style" ("onum" OpenType property string ), which looks pretty awful when used in headers. Ideally, I would like to use the “lining” (“lnum”) option, with the “table” (“tnum”) kerning (as opposed to the proportional “pnum”).

I tried using the following block font-feature-settings ads, 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 this, ensuring I get the lining patterns?

Thanks!

Answer 1

On 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; } 

It only works with .otf files, not with fonts hosted on google websites. Not supported in Safari. You can test other font features and browser support here: https://www.typotheque.com/articles/opentype_features_in_web_browsers_-_tests

Answer 2

If you want to download a font and create a new version with backing numbers or other OpenType features, see http://www.fontsquirrel.com/tools/webfont-generator .

You will need to enter Expert mode, but then in OpenType Flattening you can select Lining Numerals. If you are so addicted, you can even generate a version with an alternative form of W.

As of the end of 2014, this is the only way to get numbered numbers in Safari.

Answer 3

To follow up on wbond's answer, which should take full responsibility for this post, the expert mode in the font protein will look intimidating at first. But he mentioned any important alternative to W, which is a pretty big difference for the rally. Note that G is also different between styles.

You just put the “salt” in the “OpenType Features” box and download your kit.

Then, wherever you want to access the solo style, add it to 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 this answer, but I can not add an image to the comments. It would save me some time if someone else showed me this image, so I felt it was worth publishing.