En complément à l’article sur les fontes incorporées (à relire pour les détails de fonctionnement de cette technique), passons nous de l’étape feuille de style en utilisant les styles « inline ».

Si pour un travail particulier vous souhaitez accéder aux fontes de votre client, qui sont déjà présentes sur son serveur et dont il a la licence, il peut être un peu fastidieux d’ajouter un élément sylesheet.css, surtout s’il ne comporte QUE les polices, et que les autres éléments sont gérés par Animate.

En localisant la feuille de style correspondant chez votre client (souvent dans main.css ou fonts.css), on va retrouver une série d’instructions @font-face sous cette forme :

@font-face{
font-family:’maFonteRegular’;
src:url('../fonts/maFonte_regular_0-webfont.eot');
src:url('../fonts/maFonte_regular_0-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/maFonte_regular_0-webfont.woff') format('woff'),
url('../fonts/maFonte_regular_0-webfont.ttf') format('truetype'),
url('../fonts/maFonte_regular_0-webfont.svg#maFonte_regular_0') format('svg');
font-weight:normal;
font-style:normal;
}

On y retrouve les différents formats de fonte et surtout l'url, qui est « relative » à l'emplacement du fichier css dont elle est extraite.

Ce sont les ../fonts/ de l’url, qu’il faudra alors remplacer par l’adresse absolue de ce répertoire : http://www.monSite.com/style/fonts/ (autant de fois que nécessaire, gagnez du temps sur les remplacements multiples grâce à Brackets)

Il ne vous reste plus qu’à encadrer le tout dans 2 balises <style></style> et à ajouter la police dans Animate, en lui donnant bien le bon nom, et une fonte par défaut (je recommande dans un premier temps la « cursive » : vous voyez tout de suite si votre code échoue avant le chargement de la fonte, à terme, remettez une fonte générique qui correspond mieux, bien sûr).

EgAn-FontesIncorporees-style.png

<style>
@font-face{
font-family:’maFonteRegular’;
src:url('http://www.monSite.com/style/fonts/maFonte_regular_0-webfont.eot');
src:url('http://www.monSite.com/style/fonts/maFonte_regular_0-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.monSite.com/style/fonts/maFonte_regular_0-webfont.woff') format('woff'),
url('http://www.monSite.com/style/fonts/maFonte_regular_0-webfont.ttf') format('truetype'),
url('http://www.monSite.com/style/fonts/maFonte_regular_0-webfont.svg#maFonte_regular_0') format('svg');
font-weight:normal;
font-style:normal;
}
</style>

Dernière astuce pour finir, si vous devez préparer de nombreuses pages comportant cette fonte, n'oubliez pas de conserver quelques caractères et d'en faire un symbole, Animate vous épargnera la recopie du code !