colorize/index.html

<!DOCTYPE html>
<meta charset="utf-8">

<link href="https://fonts.googleapis.com/css2?family=Ewert&family=Akronim&family=Monoton&display=swap" rel="stylesheet">
<style>	
	@font-face {
		font-family: "Ewert Spice";
		src: url("./fonts/ewert/Ewert-Spice.ttf");
	}

	@font-face {
		font-family: "Akronim Spice";
		src: url("./fonts/akronim/Akronim-Spice.ttf");
	}

	@font-face {
		font-family: "Monoton Spice";
		src: url("./fonts/monoton/Monoton-Spice.ttf");
	}

  .demo {
  	font-size: 6vw; 
  	display: block;  	
  	text-decoration: none;
  	color: currentColor;
  }

  div {
  	font-size: 2em;
  	font-family: monospace;
  }
</style>

<div>Click to see more:</div>

<a class="demo" href="ewert.html"><span style="font-family: Ewert">Ewert</span> → <span style="font-family: Ewert Spice">Ewert Spice</span></a>
<a class="demo" href="akronim.html"><span style="font-family: Akronim">Akronim</span> → <span style="font-family: Akronim Spice">Akronim Spice</span></a>
<a class="demo" href="monoton.html"><span style="font-family: Monoton">Monoton</span> → <span style="font-family: Monoton Spice">Monoton Spice</span></a>

<div>
	Source at	<a href="https://github.com/rsheeter/colorize">https://github.com/rsheeter/colorize</a>.
	You should build one of your own!
</div>