====== Web Fonts ======

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'' : 

<code javascript>
{
    "styles": [ ],
    "fonts" : [ ],
    "webfonts": { },
    "description": { }
};
</code>

In the ''webfonts'' object, you specify which webfonts you want to use, and where to retrieve them. Geckos uses the [[https://github.com/typekit/webfontloader|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. 

===== But how do I use this ? =====

First, take a look at the [[https://github.com/typekit/webfontloader|Webfontloader documentation]].

For the example, we'll use two fonts from the Google Fonts library. Let's say [[https://fonts.google.com/specimen/Lora|Lora]] and [[https://fonts.google.com/specimen/Lora|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 =====

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 :

<code javascript>
{ "type": "textbox", "left": 0, "top": 0, "width": 100, "text": "$name", "fontFamily": "Merriweather" },
</code>

That's how you use **Webfonts** in **Geckos** !