Web fonts are an optional field of the template. It's added at the root of the template, at the same levels that description, styles or fonts :

{
    "styles": [ ],
    "fonts" : [ ],
    "webfonts": { },
    "description": { }
};

In the webfonts object, you specify which webfonts you want to use, and where to retrieve them. Geckos uses the Webfontloader tool to achieve this.

This tool provides access to fonts from multiple sources : Google Fonts, TypeKit, Adobe, Fonts.com, … Through a WebFontConfig object, you can add fonts from multiple source in a single pass.

First, take a look at the Webfontloader documentation.

For the example, we'll use two fonts from the Google Fonts library. Let's say Lora and Merriweather !

You just have to add this code to your template to use the font :

  "webfonts": {
      "google": {
          "families": ["Merriweather", "Lora"]
      }
  },

As you can see, in the webfonts object, you create a google object, which has a families array. In this array, you simply put the names of the desired fonts. Easy, isn't it ?

The fontFamily property is a String that represents the name of the font. Use the one provided by the external source (for example, Merriweather from google). It's the name that your template will use in order to display text with that font. Any Text, Textbox or similar fields you will use in the Canvas can use that font :

{ "type": "textbox", "left": 0, "top": 0, "width": 100, "text": "$name", "fontFamily": "Merriweather" },

That's how you use Webfonts in Geckos !