<h1 style="--font: system-ui">64<span>px</span></h1>
<select>
  <option value="system-ui" selected>system-ui</option>
  <option value="Arial">Arial</option>
  <option value="Georgia">Georgia</option>
  <option value="Roboto">Roboto</option>
  <option value="monospace">monospace</option>
  <option value="Impact">Impact</option>
  <option value="Papyrus">Papyrus</option>
  <option value="Times">Times</option>
</select>

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;
  
  display: grid;
  place-content: center;
  gap: 1rem;
}

h1 {
  font-family: var(--font);
  font-size: calc(1rem + 25vw);
  border: 1px solid #999;
}

span {
  color: hotpink;
}

const h1 = document.querySelector('h1');
const fonts = document.querySelector('select');

fonts.addEventListener('input', (e) =>
h1.style.setProperty('--font', e.target.value));