@font-face {
  font-family: 'Barlow GX';
  src: url("BarlowGX.ttf") format("woff-variations");
  font-style: normal;
  font-weight: 22 188;
  font-stretch: 300% 500%;
}
pre {
  text-transform: uppercase;
  transition: all 250ms linear;
  margin: 25% auto;
  border: 4px solid black;
  width: 15.5rem;
  height: 15.5rem;
  padding: 0.5rem;
  font-family: 'Barlow GX';
  font-size: 5rem;
  line-height: 1;
  font-weight: 50;
  font-variation-settings: 'wght' 50, 'wdth' 500;
}

pre:hover {
  font-variation-settings: 'wght' 50, 'wdth' 300;
}