Variable Fonts Vue.js

App.vue

<template>
  <div id="app" :style="cssVariables">
    <label>wdth</label>
    <input type="range" min="10" max="700" v-model="wght">
    <label>wght</label>
    <input type="range" min="10" max="100" v-model="wdth">

    <span>The quick brown fox jumps over the lazy dog</span>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        wdth: 10,
        wght: 10
      }
    },
    computed: {
      cssVariables () {
        return {
          '--wdth': this.wdth,
          '--wght': this.wght
        }
      }
    }
  }
</script>

<style>
  @supports (font-variation-settings: 'wdth' 200) {
    body { background-color: rgb(0, 255, 0, 0.12); }
    @font-face {
      font-family: 'AmstelvarAlpha';
      src: url('./assets/AmstelvarAlpha-VF.ttf');
    }
    span {
      font-family: AmstelvarAlpha;
      font-size: 32px;
      font-variation-settings: 'wdth' var(--wdth), 'wght' var(--wght);
    }
  }

  @supports not (font-variation-settings: 'wdth' 200) {
    body { background-color: rgb(255, 0, 0, 0.12); }
    /* Add fallback font */
  }
</style>