Web Fonts

From Emitrom

Jump to: navigation, search

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:
Hand-point.png CSS3 Fonts specification
Hand-point.png Google's WebFont Loader API
Hand-point.png Syntax for Google font families
Hand-point.png Fonts demo
Hand-point.png WebFontLoader Javadoc
Hand-point.png 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");
     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:

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: WebFontLoader ConsoleOutput.png

Personal tools