CUSTOMIZE FONTS

CUSTOMIZING WEB FONTS

Adobe Animate cc allows you to manage web fonts with Adobe typeKit and Google Fonts.

Nevertheless for a digital advertising campaign, we do not recommend to call fonts online (security problems, scalability. …).

We also recommend that you don’t choose too heavy fonts (recommended weight <50 ko) and favor loading your fonts locally.

With PreloadJs libraries built into Animate cc, we can preload font files locally before displaying the banner.

Export your HTML Template, edit it and add the following code just after the init () function:

The variable queue is the loading queue of your graphic components. Add your .css file referencing your new fonts.

function init() {
var queue = new createjs.LoadQueue(false);
queue.loadManifest([{id:'1',src:'font.css'}]);

............
............
}

After completing this step, reload the HTML Template (Publish Settings-> Advanced-> Import New).

In the .css file, fill in the path of your fonts:

@font-face {
    font-family: 'FrancoisOne-Regular';
    src: url('fonts/FrancoisOne-Regular.ttf');
    font-weight: normal;
    font-style: normal;
    color: #114454;
}
@font-face {
    font-family: 'Covered By Your Grace';
    src: url('fonts/CoveredByYourGrace.ttf');
    color: #5EBEBB;
}
@font-face {
    font-family: 'JosefinSlab-Italic';
    src: url('fonts/JosefinSlab-Italic.ttf');
    font-weight: italic;
    font-style: normal;
    color: #EC6A6D;
}

Once the fonts are loaded, you can apply the custom font to the textField (s):

ADventori.Display.setFont(this.textField,'FrancoisOne-Regular');

You can also add the name of your font to the methods of adding text:

ADventori.Display.setText(this.textField,ADventori.data.wording,'FrancoisOne-Regular');
ADventori.Display.adaptText(this.textField,14,200,200,'Covered By Your Grace');
ADventori.Display.setAndAdaptText(this.textField,ADventori.data.wording,14,200,200,'JosefinSlab-Italic');

Result :

Download example