<h1 id="test">Inter Variable Font Test</h1>

<label>Font Weight
  <input id="slider" type="range" min="100" max="900" value="100" /></label>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

body {
  font-family: 'Inter', monospace;
  padding: 30px;
}

h1 {
  margin: 0 0 30px 0;
  font-size: 64px;
  font-variation-settings: 'wght' 100;
  font-style: italic;
}

input {
  width: 100%;
}
slider = document.getElementById('slider');
test = document.getElementById('test');

slider.oninput = function() {
  test.style["font-variation-settings"] = "'wght' " + slider.value;
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.