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.

Google / CSS Link: Load fonts from Google with a link tag. Consider this a base case for font loading.
Google / Web Font Loader: Load fonts from Google with Web Font Loader.
Typekit / Web Font Loader: Load fonts from Typekit with Web Font Loader.
Custom / Web Font Loader: Load fonts from your own CSS with Web Font Loader.
Ascender / Web Font Loader: Load fonts from Ascender with Web Font Loader.
Fontdeck / Web Font Loader: Load fonts from Fontdeck with Web Font Loader.
Monotype / Web Font Loader: Load fonts from webfonts.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.

Google / Web Font Loader: Load fonts from Google in a child iframe with Web Font Loader.
Typekit / Web Font Loader: Load fonts from Typekit in a child iframe with Web Font Loader.
Custom / Web Font Loader: Load fonts from your own CSS in a child iframe with Web Font Loader.
Ascender / Web Font Loader: Load fonts from Ascender in a child iframe with Web Font Loader.
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.
Monotype / Web Font Loader: Load fonts from webfonts.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.

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

More Events

More complex samples using events.

Multiple font loads: Use CSS to control more than one font.
Multiple typefaces: The full CSS and JS event cycle when using multiple typefaces.
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.

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

Tests

Additional demo pages to test specific functionality.