OpenType settings reset by font-weight and font-st

I am using Raleway from Google Fonts as the main font for my project.

Everything was fine with it until I noticed that the numbers are displayed in "old-style" mode, which means that some digits have ascenders or descenders going up or down from the font's baseline. This harms readability for parts of the UI which render a lot of numbers.

In order to fix this I can use CSS to tweak some OpenType settings, as described here: https://www.codesmite.com/article/fixing-raleway-and-similar-fonts-numerals

Setting font-feature-settings and/or font-variant-numric works just fine on Firefox and Edge, but Chrome seems to ignore it for elements which have weight or style rules applied to them.

Basically any element which has a non-regular CSS value for font-weight (e.g. bold) or font-style (e.g. italic) will revert the numeral lining back to old-style. Also explicit lining rules (font-feature-settings: "lnum") on that particular element don't have any effect.

Is there any workaround for Chrome? Or is there a proper way to define the numeral lining globally?

I've illustrated this issue in a CodePen. If you open it in different browsers you will notice that IE and Firefox work as expected but Chrome and other webkit-based browsers render it as described above: https://codepen.io/anon/pen/LdVoJG

The reason for this is that two different versions of Raleway are used together.

The versions served by Google only have those old style numerals — they don't come with the lining numerals (lnum). So for all fonts loaded from the Google servers, you'll see these irregular looking numerals.

But you don't see them for the normal weight, because it's loading a local verson of Raleway. An installable version (also known as the "desktop version") contains all of the OpenType layout features Raleway comes with — including lining numerals. So for all text set in the normal weight, the numerals will be changed to lining numerals. For all flavors of Raleway that you don't have installed, and will be fetched from Google, won't have these so you'll see the irregular ones.

Try to uninstall all local versions of Raleway and try the CodePen again. (Take heed: fonts installed through Typekit will have to be removed through the Creative Cloud app.)

Why you see a difference between Chrome and Firefox, I don't know — I did experience the problem you mention, but I did in both browsers, until I uninstalled my local version of Raleway.