variable web font with cascade

variable.css

@font-face {
  font-family: 'Avenir Variable';
  src: url('/anv/anv-roman-var.woff2') format('woff2-variations');
  src: url('/anv/anv-roman-var.woff2') format('woff2' supports variations);
  font-weight: 1 999;
}

@font-face {
  font-family: 'Avenir Static';
  src: url('/anv/anv-medium.woff') format('woff');
  font-weight: 500;
}

@font-face {
  font-family: 'Avenir Static';
  src: url('/anv/anv-heavy.woff') format('woff');
  font-weight: 800;
}

@font-face {
  font-family: 'Avenir Condensed Static';
  src: url('/anv/anv-cond-medium.woff') format('woff');
  font-weight: 500;
}

.someclass {
  font-family: 'Avenir Variable', 'Avenir Static', sans-serif;
  font-weight: 500;
}