<!doctype html> <html> <head>

<link href="/basic.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/webfont.js"></script>
<script type="text/javascript">
  WebFont.load({
    google: {
      families: ['Droid Sans'],
      api: '/fonts/api',
      blocking: false
    }
  });
</script>
<style type="text/css">

  /* Show and style the loading message while fonts are loading */
  html.wf-loading #loading-message {
    display: block;
    color: #999;
  }

  /* Hide the content while fonts are loading */
  html.wf-loading #content {
    display: none;
  }

  /* Hide the loading message after fonts render */
  html.wf-active #loading-message {
    display: none;
  }
  html.wf-active h1 {
    font-family: 'Droid Sans';
  }
</style>

</head> <body>

<h1 id="loading-message">
  I'm loading!
</h1>
<h1 id="content">
  Hello World. I am Droid Sans.
</h1>
<hr>
<p>
  <a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
  <a href="/event-css-loading.html">Reload Cached</a>
</p>
<p>
  The goal of this page is to use CSS to show a loading message while the 
  headline's font is loading, then hide the loading message and show the 
  headline once the font has rendered.
</p>

</body> </html>