<!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>