PERSONNALISER LA POLICE

Personnalisation de la police web  : 

Adobe Animate cc vous permet de gérer les polices web avec Adobe typeKit et Google Fonts.

Néanmoins pour une campagne publicitaire digitale, nous déconseillons d’appeler une police en ligne (problèmes de sécurité, scalabilité …) .

Nous conseillons également de ne pas avoir des polices trop lourdes (poids conseillé < 50 ko) et de privilégier le chargement de votre police en local.

Grâce à librairie PreloadJs intégrée dans Animate cc, nous pouvons précharger les fichiers de polices en local avant le lancement de la bannière.

Exporter votre Template html (Paramètre de publication->avancé->exporter) , éditer le Template , ajouter le code ci-dessous juste après la fonction init()

La variable queue correspond à la file d’attente de chargement de vos éléments graphiques. Ajoutez votre fichier .css référençant vos nouvelles polices 

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

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

Une fois cette étape terminer , recharger le Template Html  (Paramètre de publication->avancé->importer nouveau) 

Dans le fichier .css, renseignez le chemin de vos polices : 

@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;
}

Une fois les polices chargées, vous pouvez appliquer la police personnalisée au(x) textField(s) :

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

Vous pouvez également ajouter le nom de votre police aux méthodes d’ajout de texte :

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');

Résultat :

Téléchargez l’exemple