Les polices incorporées

La première grande question à se poser est Ai-je le droit d'incorporer des fontes ? Parce que, mine de rien, à l'instar des autres logiciels (oui oui, une fonte, c'est un caractère, certes, mais c'est aussi un dessin, vectoriel, informations codées de façon mathématique), il n'est pas forcément permis de distribuer les fichiers auxquels vous avez eu accès par la licence dont vous vous êtes acquitté.

FontSquirrel-FontFaceKit.png Il existe cependant quelques licences qui proposent ce service et c'est sur FontSquirrel que je vais m'appuyer pour présenter un process finalement plutôt simple à mettre en place.

Première chose à faire, passer sur l'onglet @font-face kits. Vous aurez accès à une sélection des polices proposées sur le site, spécialement destinées à être distribuées sous la forme de kits. Profitez-en pour lire la description de leur contenu et des différents formats de caractère (TrueType, EOT, WOFF, SVG…).

Et puis, en déroulant la fenêtre, choisir la typo dont vous avez besoin, celle qui correspond à votre projet. Évidemment, vous êtes plus limités que sur des locations de licences de polices en ligne, et bien plus encore que dans les achats de licences de polices pour l'impression.

FontSquirrel-FontFaceKit-FontPage.png Vous voilà donc sur la page choisie. Profitez-en pour vérifier quels subsets sont disponibles, et si le jeu de caractères choisi dispose bien des diacritiques, parce qu'écrire en français sans accents et sans cédille relève d'un jeu à la Gorgs Prc.

De là, choisir, donc, le format de fonte à proposer (par exemple, incorporer du EOT alors que l'animation ne sera vue que sur iPad, c'est gâcher quelques précieux octets, mais, faire cette économie si on veut réutiliser l'animation, c'est s'exposer à devoir refaire, bref, encore une question d'arbitrage, que je vous laisse peser vous même).

Enfin, il vous reste à télécharger le fameux kit, sous la forme d'une archive zip, que vous pourrez ouvrir et qui contient tous les fichiers attendus, plus demo.html et stylesheet.css (on va s'en servir plus tard, ne jetez rien !)

Utiliser ces fontes dans Edge Animate

EgAn-FontesIncorporees-StructureDossier.png L'étape suivante est assez simple. Une fois votre projet Animate enregistré, glissez-y le dossier du font-face kit dézippé (ici, en rouge). Vous noterez au passage que, du coup, quand on est dans la page Edge, pour accéder à demo.html, il faut rentrer dans ce dossier font-face-kit. C'est important pour la suite (sinon, je ne m'embêterais pas à préciser).

Dans Animate, donc, soit dans la bibliothèque>polices, soit avec un texte sélectionné, dans ses propriétés>texte, cliquez sur le petit plus + pour ajouter la fonte qui vous intéresse (voir le modus operandi dans l'article précédent sur le même sujet).

EgAn-Fontesincorporees-AjoutPolice.png

EdgeCode-HTML-LinkStyleSheet.png Reste à savoir quoi copier dans les différentes cases, et, une fois de plus, pas de souci : nous avons le fichier demo.html, qu'on va ouvrir dans un éditeur de texte (type Adobe Edge Code).

Là, on ira piocher la ligne qui comporte le lien vers la feuille de style stylesheet.css. C'est une ligne qui ressemble globalement à

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8">

(prévoir des variantes selon l'endroit où vous irez piocher vos font-face kits)

Un peu plus bas, vous trouverez la liste des polices de secours (le fallback sur lequel on s'appuie si les fontes ne sont pas chargées). On peut le copier/coller dans le premier champ de la fenêtre.

'Nom de ma fonte', Arial, sans-serif //(sans le point virgule)

Reste enfin à ne pas oublier le lien de la feuille de style, qui est relatif au dossier. Depuis le Finder, copiez-collez le nom du dossier (vous pouvez aussi tenter de l'écrire sans faute d'orthographe) et incorporez-le juste avant le nom de stylesheet.css (après la balise href, hein, pas après la balise rel)

<link rel="stylesheet" href="NomDuDossier/stylesheet.css" type="text/css" charset="utf-8">

Si vous avez de la chance, la police est incorporée et affichée directement. Sinon, il vous faudra fermer le fichier et le rouvrir, Animate rechargeant alors l'ensemble des éléments.

Voilà qui devrait vous être utile.