Fetching contributors…
Cannot retrieve contributors at this time
56 lines (52 sloc) 1.33 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',
blocking: false
<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';
<h1 id="loading-message">
I'm loading!
<h1 id="content">
Hello World. I am Droid Sans.
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
<a href="/event-css-loading.html">Reload Cached</a>
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.