test.html

<html>
<head>

<style>
@font-face {
  font-family: 'HexDumpFont';
  src: url('/out/HexDumpFont.woff') format('woff');
}

.hexdumpfont {
  font-family: "HexDumpFont";
}

.inputbox {
  width: 90%;
}

.hidden {
  display: none;
}
</style>
</head>
<body>

<span id="example">
<pre class="hexdumpfont" >
&#x00;
&#x01;
&#x02;
&#x03;
&#x04;
&#x05;
&#x06;
&#x07;
&#x08;
<!-- Becomes vertical tab -->
&#x09;
&#x0a;
&#x0b;
&#x0c;
&#x0d;
&#x0e;
&#x0f;

Hello World
<!-- RIGHT SINGLE QUOTATION MARK -->
&#x2019;
</pre>
<a href="javascript: document.getElementById('example').classList.add('hidden');">Hide Example</a><br>
</span>

<textarea class="hexdumpfont inputbox">
</textarea>

</body>
</html>