<form>
  <label for="changefont">Select a font: </label>
  <select id="changefont">
    <option value="'Ma Shan Zheng',sans-serif">Ma Shan Zheng</option>
    <option selected value="'ZCOOL KuaiLe',sans-serif">ZCOOL KuaiLe</option>
  </select>
</form>

<p>The following paragraph has an <code>inline-size</code> of <code>30ic</code>. Notice that the size changes when the font changes.</p>

<div style="font-family: 'ZCOOL KuaiLe', sans-serif">
  <p lang="zh">水 鉴于承认人类大家庭所有成员的固有尊严以及平等和不可剥夺的权利是世界自由、正义与和平的基</p>
</div>

@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&display=swap");

:root {
  font: 150% / 1.5 helvetica, arial, sans-serif;
}

[lang="en-us"],
form {
  font-family: helvetica, arial, sans-serif;
  font-size: 1.25rem;
  display: block;
}

label {
  font-weight: bold;
}

select,
input {
  font: inherit;
}

[lang="zh"] {
  background: #333;
  color: #fff;
  padding: 5px;
  inline-size: 30ic;
}

const form = document.querySelector("form");

form.addEventListener("change", (event) => {
  document.querySelector("div").style = `font-family: ${event.target.value}`;
});