WebFont Loader Demos

Demonstrations of pure CSS and JavaScript-enhanced use of @font-face.

Note that many of these demonstrations use a slow proxy to increase the amount of time it takes to load a font. We do this to make it more obvious that the events system is working. It does not represent real world usage.

Modules

WebFont Loader provides modules to load fonts from many places.

  1. Google / CSS Link: Load fonts from Google with a link tag. Consider this a base case for font loading.
  2. Google / WebFont Loader: Load fonts from Google with WebFont Loader.
  3. Typekit / WebFont Loader: Load fonts from Typekit with WebFont Loader.
  4. Custom / WebFont Loader: Load fonts from your own CSS with WebFont Loader.
  5. Ascender / WebFont Loader: Load fonts from Ascender with WebFont Loader.

Events

WebFont Loader provides events to help control font rendering across browsers. Here are some sample uses.

  1. Show when rendered (CSS): Use CSS to show part of the page only when the font has rendered. (Webkit style)
  2. Show when rendered (JS): Use JS to show part of the page only when the font has rendered. (Webkit style)
  3. Fallback before rendered (CSS): Use CSS to show fallback font before the font has rendered. (Mozilla style)
  4. Show loading message (CSS): Use CSS to show a message while the font loads.
  5. Show loading message (JS): Use JS to show a message while the font loads.

More Events

More complex samples using events.

  1. Multiple font loads: Use CSS to control more than one font.
  2. Multiple typefaces: The full CSS and JS event cycle when using multiple typefaces.
  3. Multiple variations: The full CSS and JS event cycle when using multiple weights and styles of one typeface.

IE Behavior

WebFont Loader helps workaround IE's page blocking behavior.

  1. Slow Link: Demonstrate that IE blocks the whole page when loading fonts via a LINK tag.
  2. Fast JS: By default, WebFont Loader works around the default IE loading behavior.
  3. Slow JS: Restore the default IE loading behavior.

Tests

Additional demo pages to test specific functionality.

  1. Typekit with Multiple Variations