<div class="vf-explained">
        <div class="font font0">a</div>
        <div class="font font1">a</div>
        <div class="font font2">a</div>
        <div class="font font3">a</div>
        <div class="font font4">a</div>
        <div class="font font5">a</div>
        <div class="font font6">a</div>
        <div class="font font7">a</div>
      </div>

       @font-face {
        font-family: 'Plex Sans VF';
        src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/IBMPlexSansVar-Roman.woff2') format('woff2-variations');
        font-display: swap;
        font-stretch: 85% 100%;
        font-style: normal;
        font-weight: 100 700;
      }
        
      @font-face {
        font-family: 'Plex Sans VF';
        src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/IBMPlexSansVar-Italic.woff2');
        font-display: swap;
        font-stretch: 85% 100%;
        font-style: italic;
        font-weight: 100 700;
      }

html {
        box-sizing: border-box;
      }
      *, *:before, *:after {
        box-sizing: inherit;
      }

      .vf-explained {
        margin: 0 auto;
        opacity: 1;
        position: relative;
        width: 25rem;
      }
      
      .font {
        font-family: "Plex Sans VF";
        font-weight: 100;
        margin: 0 auto;
        width: 100%;
        text-align: center;
        transition: all 2s ease-in-out;
        font-size: 25rem;
        line-height: 1;
      }

      .font0 {
        font-stretch: 100%;
        font-weight: 400;
        position: absolute;
        opacity: 0.65;
      }

      .font1 {
        color: transparent;
        font-stretch: 85%;
        font-weight: 100;
        position: absolute;
        opacity: 0.35;
        -webkit-text-stroke: 1px black;
        text-stroke: 1px black;
      }

      .font2 {
        font-stretch: 87.5%;
        font-weight: 20;
        position: absolute;
        opacity: .35;
        -webkit-text-stroke: 1px black;
        text-stroke: 1px black;
        color: transparent;
      }

      .font3 {
        font-stretch: 90%;
        font-weight: 300;
        position: absolute;
        opacity: .35;
        -webkit-text-stroke: 1px black;
        text-stroke: 1px black;
        color: transparent;
      }

      .font4 {
        font-stretch: 92.5%;
        font-weight: 400;
        position: absolute;
        opacity: .45;
        -webkit-text-stroke: 1px black;
        text-stroke: 1px black;
        color: transparent;
      }

      .font5 {
        font-stretch: 95%;
        font-weight: 500;
        position: absolute;
        opacity: .35;
        -webkit-text-stroke: 1px black;
        text-stroke: 1px black;
        color: transparent;
      }

      .font6 {
        color: #006699;
        font-stretch: 97.5%;
        font-weight: 600;
        position: absolute;
        opacity: .2;
        -webkit-text-stroke: 1px black;
        text-stroke: 1px black;
      }
      
      .font7 {
        color: #006699;
        font-stretch: 100%;
        font-weight: 700;
        position: absolute;
        opacity: .045;
        -webkit-text-stroke: 1px black;
        text-stroke: 1px black;
      }