Variable fonts are awesome, but unnecessary usage of
font-variation-settings will eventually break your styles.
<span class="italic bold">italic bold?</span>
What do you think, will it be both italic and bold? Hint: it won't.
What is the problem and how to fix it
font-variation-settingsdo not add up, so, when several rules overlap, they override one another.
- Common workaround for that is using CSS variables, but you really don't want to get in that mess just to define font-weight in a fancy way, don't you?
font-stylein this manner does nothing at all, variable fonts can handle these properties without axes modifications.
Latter is even mentioned in spec:
When possible, authors should generally use […] this property for special cases where its use is the only way of accessing a particular infrequently used font variation. For example, it is preferable to use
font-weight: 700rather than
font-variation-settings: 'wght' 700.
Just use font properties: