Why isn't this CSS rule being applied?

Question

I want all the text fonts to use Roboto by default, but also for one specific class to use Roboto Thin. Here is my code so far:

mixins.less

* {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

fast-payment.less

@import (reference) '../../content/less/mixins';
.bss-fast-payment {
  &__header {
    .useAlsSectorFont();
  }
}

Chrome DevTools

Answer 1

I think I finally found out how to do it. The only thing I changed was to put bss-fast-payment__header .

mixins.less

* {
      font-family: 'Roboto', sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

fast-payment.less

@import (reference) '../../content/less/mixins';
.bss-fast-payment {
  &__header * {
    .useAlsSectorFont();
  }
}

Result

Answer 2

The * selector is overriding the .bss-fast-payment__header class selector. You can use:

font-family: 'Roboto Thin', sans-serif !important;

to force an override. Try to avoid doing this too often, and try to avoid the * selector as well.

Answer 3

Use !Important with font-family that are getting override with child class.