index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <title>Glytter: Glytter: the font glyph getter</title>
  <link rel="stylesheet" href="glytter.css" rel="stylesheet" />
</head>

<body>
  <div class="page">
    <header>
      <h1>Glytter: the font glyph getter</h1>
    </header>
    <main>
      <p><em>This tool lets you view all characters for most font files (.ttf, .otf, .woff, or .woff2) on your local machine. Fonts are kept on your machine and not uploaded anywhere.</em></p>
      <h2>Current Font: <span id="fontfam">Firava</span></h2>
      <p><label for="fontinput">Change font:</label> <input type="file" id="fontinput" name="fontinput"></p>
      <p id="charmap"></p>
    </main>
    <footer>
      <h2>Notes</h2>
      <ul>
      <li><a href="https://github.com/hellogreg/glytter">View this project on GitHub.</a></li>
      <li>Glytter uses <a href="https://github.com/foliojs/fontkit">fontkit</a> to parse font info.</li>
      <li>The page's default typeface, <a href="https://firava.netlify.app/">Firava</a>, is a variable adaptation of Mozilla's Fira Sans.</li>
      <li>This project was created by me, <a href="http://hellogreg.org">Greg Gibson</a>, because I wanted a simple tool for viewing and copying character sets for fonts I produce or use.</li>
      </ul>
    </footer>
  </div>
</body>
<script src="fontkit.min.js"></script>
<script src="glytter.js"></script>

</html>