<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://fonts.googleapis.com/css2?family=Goldman&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Display&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap"
rel="stylesheet"
/>
<style>
html {
--font: Goldman;
}
html[data-theme="font2"] {
--font: "Big Shoulders Stencil Display";
}
html[data-theme="font3"] {
--font: "Pacifico";
}
* {
font-size: 30pt;
font-family: var(--font);
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
facilis labore dolor perferendis illo eligendi dolores neque maxime
obcaecati aut perspiciatis dolorum, eum at atque dolore nobis cum quis
ducimus!
</p>
<button class="font1">Goldman</button>
<button class="font2">Big Shoulders Stencil Display</button>
<button class="font3">Pacifico</button>
<script>
document.querySelector(".font1").addEventListener("click", (e) => {
document.documentElement.removeAttribute("data-theme");
});
document.querySelector(".font2").addEventListener("click", (e) => {
document.documentElement.setAttribute("data-theme", "font2");
});
document.querySelector(".font3").addEventListener("click", (e) => {
document.documentElement.setAttribute("data-theme", "font3");
});
</script>
</body>
</html>