<!doctype html> <html> <head>
<script type="text/javascript" src="/webfont.js"></script> <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({ google: { families: ['Droid Sans', 'Tangerine'] }, 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> <style type="text/css"> h1 { visibility: hidden; } .wf-droidsans-n4-active h1.droid { font-family: 'Droid Sans'; font-weight: normal; visibility: visible; } .wf-tangerine-n4-active h1.tangerine { font-family: 'Tangerine'; font-weight: normal; visibility: visible; } /* All Class hooks */ #classes { color: #ddd; } html.wf-loading #classes .Loading, html.wf-active #classes .Active, html.wf-inactive #classes .Inactive, html.wf-droidsans-n4-loading #classes .DroidSansLoading, html.wf-droidsans-n4-active #classes .DroidSansActive, html.wf-droidsans-n4-inactive #classes .DroidSansInactive, html.wf-tangerine-n4-loading #classes .TangerineLoading, html.wf-tangerine-n4-active #classes .TangerineActive, html.wf-tangerine-n4-inactive #classes .TangerineInactive { color: #000; } </style>
</head> <body>
<h1 class="droid"> Hello World. I am Droid Sans. </h1> <h1 class="tangerine"> Hello World. I am Tangerine. </h1> <hr> <p> <a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> | <a href="/events.html">Reload Cached</a> </p> <p> The goal of this page is to show all of the font loading event callbacks when using multiple typefaces. </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="DroidSansLoading">Droid Sans Loading</li> <li class="DroidSansActive">Droid Sans Active</li> <li class="DroidSansInactive">Droid Sans Inactive</li> <li class="TangerineLoading">Tangerine Loading</li> <li class="TangerineActive">Tangerine Active</li> <li class="TangerineInactive">Tangerine Inactive</li> </ul> <h2>JavaScript Event Progress</h2> <ol id="events"></ol>
</body> </html>