JSFiddle - React, Tailwind, and code Playground

by sambaldwin

HTML

<!-- Animating variable fonts -->

<div id="light">hamburgefonstiv</div>

CSS

div {
  font-family: 'Skia';
  font-size: 8em;
}

#light {
  font-variation-settings: 'wght' 0.8;
  animation: keyframes 10s infinite alternate;
}

#light:hover {
  animation-play-state: paused;
}

@keyframes keyframes {
  from {
    font-variation-settings: 'wght' 0.8, 'wdth' .8;
   }
  to {
  font-variation-settings: 'wght' 2, 'wdth' 1.2;

    }
}