<!doctype html> <html> <head>

<title>Custom Module</title>
<script type="text/javascript" src="/webfont.js"></script>
<style type="text/css">

  h1 {
    font-family: 'ChunkFiveRegular';
  }

  /* All Class hooks */
  #classes { color: #ddd; }
  html.wf-loading #classes .Loading,
  html.wf-active #classes .Active,
  html.wf-inactive #classes .Inactive,
  html.wf-chunkfiveregular-n4-loading #classes .ChunkFiveLoading,
  html.wf-chunkfiveregular-n4-active #classes .ChunkFiveActive,
  html.wf-chunkfiveregular-n4-inactive #classes .ChunkFiveInactive {
    color: #000;
  }

</style>

</head> <body>

<h1 class="tagesschrift">
  Hello World. I am ChunkFive.
</h1>
<hr>
<p>
  <a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
  <a href="/custom.html">Reload Cached</a>
</p>
<p>
  The goal of this page is to show how fonts load from a custom module.
</p>
<h2>CSS Hook Status</h2>
<ul id="classes">
  <li class="Loading">Loading</li>
  <li class="Active">Active</li>
  <li class="Inactive">Inactive</li>
  <li class="ChunkFiveLoading">ChunkFive Loading</li>
  <li class="ChunkFiveActive">ChunkFive Active</li>
  <li class="ChunkFiveInactive">ChunkFive Inactive</li>
</ul>
<h2>JavaScript Event Progress</h2>
<ol id="events"></ol>

<!-- loading event may fire before page is completely ready -->
<script type="text/javascript">
  function progress(message) {
    var output = document.getElementById('events');
    if (output) {
      var e = document.createElement('li');
      e.innerHTML = message;
      output.appendChild(e);
    }
    if (window.console && window.console.log) {
      window.console.log(message);
    }
  }
  WebFont.load({
    custom: {
      families: ['ChunkFiveRegular'],
      urls : ['http://seanmcb.com/typekit/wfl/stylesheet.css']
    },
    loading: function() {
      progress('loading');
    },
    active: function() {
      progress('active');
    },
    inactive: function() {
      progress('inactive');
    },
    fontloading: function(fontFamily, fontDescription) {
      progress('fontloading: ' + fontFamily + ' (' + fontDescription + ')');
    },
    fontactive: function(fontFamily, fontDescription) {
      progress('fontactive: ' + fontFamily + ' (' + fontDescription + ')');
    },
    fontinactive: function(fontFamily, fontDescription) {
      progress('fontinactive: ' + fontFamily + ' (' + fontDescription + ')');
    }
  });
</script>

</body> </html>