Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

61 lines (57 sloc) 1.606 kb
<!doctype html>
<link href="/basic.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/webfont.js"></script>
<script type="text/javascript">
google: {
families: ['Droid Sans'],
api: '/fonts/api'
* Style the document while fonts are loading.
loading: function() {
// The <body> doesn't exist yet, so wait a moment.
setTimeout(function() { = '#999';
}, 10);
* When fonts are rendered, hide the loading message, show the
* content, and change the style of the document.
active: function() {
var loadingMessage = document.getElementById('loading-message');
var content = document.getElementById('content'); = 'none'; = 'block'; = '#000';
<style type="text/css">
h1 {
font-family: 'Droid Sans';
<h1 id="loading-message">
I'm loading!
<h1 id="content" style="display:none;">
Hello World. I am Droid Sans.
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
<a href="/event-js-loading.html">Reload Cached</a>
The goal of this page is to use JavaScript to manipulate the DOM while
fonts are loading, and once they have all rendered.
Jump to Line
Something went wrong with that request. Please try again.