CSS Hell

Collection of common CSS mistakes, and how to fix them

font-variation-misfortune

Posted on by vanilla_ixth

Variable fonts are awesome, but unnecessary usage of font-variation-settings will eventually break your styles.

Bad example

.bold {
  font-variation-settings: 'wght' 700;
}

.italic {
  font-variation-settings: 'ital' 1;
}
<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-settings do 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?
  • Redefining font-weight, font-stretch or font-style in 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: 700 rather than font-variation-settings: 'wght' 700.

Good example

Just use font properties:

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

Resources