It does not implement the CSS rules. It ignores the declaration.
The p.p400 style overwrites the .lnum style. In the second screenshot, you can see all of the .lnum styles in gray as they are inactive.
font-feature-settings rules don’t take part in CSS inheritance. The font-variant-numeric and similar rules should, though. You can work around this by using CSS variables:
:root {
--lnum: 0;
--tnum: 1;
}
.p400 {
font-feature-settings: "tnum" var(--tnum), "lnum" var(--lnum);
}
.lnum {
--lnum: 1;
}
1 Like
That´s it. I got it. I switched the order of the code in CSS. It is working now.
The font-feature-settings don’t appear to be the problem here, as the lnum class is set directly on the element, so no inheritance is involved.
I think your use of the font shorthand in the p.p400 styles overwrites the styles of .lnum. Consider not using the shorthand and instead using the individual properties like so:
p.p400 {
font-size: 6rem;
font-family: FelloCantionSansVF, sans-serif;
}
Will do.
I will put it on Github and share the css here.
thnx