WebFont Loader - easy @font-face from Google, TypeKit, or your own site

Thanks to greater browser support for @font-face, web typography is breaking free from the same boring font stacks we’ve known for the last ten years. As with any new technique, @font-face introduces new challenges for finding the right cross-browser syntax, especially to avoid things like Firefox’s Flash of Unstyled Text issue.

WebFont Loader is an open source project from Typekit that helps you easily embed web fonts in a consistent, cross browser way regardless of the font source. It also provides some events you can handle as fonts are loaded, letting you more closely control the font rendering process.

<script>
  WebFont.load({
    google: {
      families: ['Droid Sans']
    }
  });
</script>
<style>
  h1 {
    font-family: 'Droid Sans';
    visibility: hidden;
  }
  .wf-active h1 {
    visibility: visible;
  }
</style>

In this example, we can hide the h1 until the Droid Sans font has finished loading.

WebFont Loader is hosted on Google AJAX APIs and can use the Google Font API to load fonts from Google, from TypeKit, or even your own custom site. Hopefully we’ll see support for FontSquirrel and FontSpring soon.

[Source on GitHub]