From Emitrom

Back to Index

---

The WebFontLoader API is part of the Pilot API library. To use it in Lienzo, make sure you install it properly.

If you want to use web fonts in the fontFamily attribute of Lienzo Text nodes, you can load these fonts via the WebFontLoader class.

WebFontLoader provides a wrapper around the WebFont Loader API developed by Google and TypeKit.

See also:
CSS3 Fonts specification
Google's WebFont Loader API
Syntax for Google font families
Fonts demo
WebFontLoader Javadoc
Lienzo User Manual

Make sure you use it in the onModuleLoad method of the EntryPoint of your GWT application, or it may not load the fonts. We've also seen it failing to load when you have certain style rules in your CSS files, see WebFont Loader issue list.

Typical usage:

public void onModuleLoad()
{
     WebFonts webFonts = new WebFonts();
     webFonts.addGoogleFamily("Open Sans", "Josefin Slab", "Arvo");
     webFonts.addTypeKitId("mykitid1", "mykitid2");
     webFonts.addAscenderKey("myAscenderKey");
     webFonts.addAscenderFamily("AscenderSans:bold,bolditalic,italic,regular");
     
     WebFontLoader.loadFonts(true, webFonts, new Runnable() {
         public void run() {
             init(); // start the rest of your app
         }
     });
}

The Runnable will be called when it's done loading the fonts, regardless of whether it actually succeeded or not. If you need finer control on whether it (partially) succeeded or completely failed, or if you need to know which fonts didn't load, implement the WebFontHandler and use the loadFonts method that takes a WebFontHandler. There's also a variant that takes two Runnables, one for the active callback and one for the inactive callback.

It should invoke the following callbacks:

• loading - indicates that the Google WebFont Loader script started
• fontLoading - when it starts to load a font
• fontActive - when it succeeded in loading a font
• fontInactive - when it failed to load the font
• active - when it's done loading all the fonts and at least one font loaded successfully
• inactive - when it's done loading and none of the fonts loaded successfully

When a font is loaded successfully (fontActive), WebFontLoader adds it to a map, which you can query with WebFonts.getActiveFonts(). Similarly, inactive fonts can be queried via WebFonts.getInactiveFonts().

Note that the script times out after 5 seconds, so for every font that didn't load yet, it will then call fontInactive.

As always, when using web fonts, make sure you provide "backup fonts" in your font definitions, just in case a font didn't load, e.g.

Text text = new Text(5, 5, "Some text");
text.setFontFamily("Fancy Web Font, serif");

In this example, we used Web Fonts in a Lienzo Text node.

Note that WebFontLoader can't be used more than once in an application!

Debugging the loading process with the Developer Console

If you specify a debug value of true it will print debug messages for each of the callbacks to the Developer Console (e.g. in FireFox or Chrome.) This is what a successful load looks like in the Chrome Developer Console: