Why is my font-weight only switching from normal and bold instead of following the number?

Question

I implemented the font Inter into my website following their web site instructions: https://rsms.me/inter/download/ for Web Use.

However, I'm noticing that setting my font-weight to 100, 200, 700, 800, etc. doesn't matter, all that happens is for 600 and up my font is bold, and 500 and below my font is normal. How can I make it so the font weight is set for each number?

/* IMPORTANT */
:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}

@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

.btnText {
  color: blue;
  font-weight: 500;
}
.boldBtnText {
  color: blue;
  font-weight: 600;
}

<div>
  <p class="btnText">
    normal
  </p>

  <p class="boldBtnText">
    bold
  </p>
</div>

Answer 1

/* IMPORTANT */
@import url('https://rsms.me/inter/inter.css');
:root { font-family: Inter, sans-serif; }
  @supports (font-variation-settings: normal) {
    :root { font-family: InterVariable, sans-serif; }
  }
.btnText {
  color: green;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
}
.boldBtnText {
  color: green;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}

<div>
  <p class="btnText">
    normal
  </p>

  <p class="boldBtnText">
    bold
  </p>
</div>

You can try to just import the css from your css like above. I just tested using the different font weight.

Answer 2

You left out any reference to their inter.css. If you simply add

@import url('https://rsms.me/inter/inter.css');

at the top of your CSS, you can set font-weight to any integer value between 100 and 900 and you'll get continuous variation of weights.

(Adding the @import line is what the other answer did, but then in that answer font-family was set to Inter, which means the variable font is not requested.)