---
layout: default
---

{% assign typeface = site.typefaces | where: 'name', page.typeface | first %}

<header class='type-detail-header m2'>
  <h2><a href='{{ typeface.url }}'>{{ typeface.name }}</a> / <span class='w400'>Glyph inspector</span></h2>
</header>

<div class='grid'>
  <div class='gr1 gc3' id='glyph-detail'>
    <canvas id='glyph-detail-canvas'></canvas>
    <div id='glyph-info'>
      <h3>Glyph</h3>
      <p>Undefined</p>            
      <h3>Glyph Name</h3>
      <p>Undefined</p>
      <h3>HTML Code</h3>
      <p>Undefined</p>
      <h3>CSS Code</h3>
      <p>Undefined</p>
    </div>
  </div>

  <div id='glyph-grid-container' class='gr1 gc9'>
    <div class='pagination-wrapper'><div id='glyph-pagination'></div></div>
    <div id='glyph-grid'></div>
  </div>
</div>

<script src='/js/opentype.min.js'></script>
<script src='/js/glyph-inspector.js'></script>
<script>
  glyphInspector({{ page.font_file }}, '{{ typeface.name | slugify }}')
</script>