# Web Font 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

Web Font 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 / Web Font Loader: Load fonts from Google with Web Font Loader.
3. Typekit / Web Font Loader: Load fonts from Typekit with Web Font Loader.
4. Custom / Web Font Loader: Load fonts from your own CSS with Web Font Loader.
5. Fontdeck / Web Font Loader: Load fonts from Fontdeck with Web Font Loader.
6. Monotype / Web Font Loader: Load fonts from fonts.com with Web Font Loader.

## Modules in Iframes

Web Font Loader provides the ability to load fonts in child iframes using modules, instead of the main window.

1. Google / Web Font Loader: Load fonts from Google in a child iframe with Web Font Loader.
2. Typekit / Web Font Loader: Load fonts from Typekit in a child iframe with Web Font Loader.
3. Custom / Web Font Loader: Load fonts from your own CSS in a child iframe with Web Font Loader.
4. Fontdeck / Web Font Loader: Their demo fonts seem to be broken at the moment, so we don't have an iframe demo of this module.
5. Monotype / Web Font Loader: Load fonts from fonts.com in a child iframe with Web Font Loader.

## Events

Web Font 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

Web Font 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, Web Font 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
2. Default font stacks for FontWatchRunner