<h1>Variable Font</h1>
<h2>Not variable</h2>

@import url('https://rsms.me/inter/inter.css');
h1, h2 { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
  h1 { font-family: 'Inter var', sans-serif; }
}

* {
  padding: 0;
  margin: 0;
}


h1, h2 {
  font-size: calc(100vw / 24 * 2);
  @media (max-width: 600px) {
    font-size: 3rem;
  }
  font-weight: 100;
  transition: 2s;
  &:hover {
    font-weight: 900;
    transition: 0.5s;
  }
}