Per rendere le animazioni più attraenti Adobe Edge Animate permette di utilizzare nei testi dei font non standard, che solitamente non sono presenti sulle macchine degli utenti che visualizzeranno l’animazione.
Vedremo come inserire questi font attraverso i servizi online di Adobe: Edge Web Fonts e Typekit, di Google: Google Web Fonts ed includendoli manualmente utilizzando la regola @font-face dei css.
INTRODUZIONE
Partiamo creando una nuova animazione Edge Animate ed inserendo al suo interno un testo.
Per andare ad aggiungere i nostri web fonts cliccheremo sul bottone [+] che si trova affianco a Fonts all’interno del pannello Library, si aprirà una finestra chiamata “Edit Web Font“.
EDGE WEB FONTS
Edge Web Fonts è una libreria di font web creata da Adobe appositamente per appoggiare Edge Animate e più in generale gli Edge Tools nell’utilizzo di web fonts.
Per recuperare il font andiamo sul sito Edge Web Fonts
e scegliamo un font di nostro gradimento, io ho scelto “Sarina”.
A questo punto nella finestra Edit Web Fonts andiamo ad inserire in Embed Code
<script src=”http://use.edgefonts.net/sarina.js”></script>mentre in Font Fallback List
“sarina”, serifOra clicchiamo su “Save” per salvare le nostre modifiche.
Selezioniamo il nostro testo, a sinistra appariranno le proprietà dell’oggetto.
Nella tendina all’interno di Text sarà apparso il nuovo font
“sarina”, serif.
Selezioniamolo per applicarlo al testo.
TYPEKIT
Typekit è un servizio di Adobe per la vendità di fonts professionali da poter utilizzare nelle proprie creazioni web ed in particolare con gli Edge Tools.
Per recuperare le informazioni che ci servono andiamo sul sito Typekit.com e dopo esserci autenticati (è sufficiente un account Trial gratuito) scegliamo un font di nostro gradimento, io ho scelto “Badaboom Pro“.
Nella pagina del font clicca sul pulsante “+ Add to Kit” per aggiungere il font alla tua libreria personale, quindi clicca su “Launch Kit Editor” in alto a destra, si aprirà un popup.
In questa pagina selezioniamo il font aggiunto e clicchiamo su “Embed Code“, si aprirà un modal dal quale recupereremo il codice da inserire all’interno di Embed Code nella finestra Edit Web Fonts
<script type=”text/javascript” src=”//use.typekit.net/uyh8iti.js”></script>
<script type=”text/javascript”>try{Typekit.load();}catch(e){}</script>
Per recuperare il codice da inserire in Font Fallback List, chiudiamo il modal ma manteniamo aperto il Kit Editor e clicchiamo su “Using Fonts in CSS“.
Quindi copia/incolliamo la regola css:
“badaboom-pro”, sans-serifOra clicchiamo su “Save” per salvare le nostre modifiche.
Selezioniamolo per applicarlo al testo.
Nella tendina all’interno di Text sarà apparso il nuovo font
“badaboom-pro”, sans-serif.
Selezioniamo il nostro testo, a sinistra appariranno le proprietà dell’oggetto.
P.S.: per testarlo localmente ricordatevi di aggiungere alle preferenze del vostro Kit di font la stringa “localhost, 127.0.0.1” mentre per testarlo online aggiungete l’URL del vostro sito.
GOOGLE WEB FONTS
Google Web Fonts è un servizio creato da Google che come per Edge Web Fonts e Typekit permette di utilizzare web fonts inserendo poche righe di codice e senza dover includere i fonts sul proprio server.
Per recuperare le informazioni del font andiamo sul sito
Google Web Fonts
e scegliamo un font di nostro gradimento,
io ho scelto “Grand Hotel”.
Ora nella finestra Edit Web Fonts andiamo ad inserire in Embed Code
<link href=’http://fonts.googleapis.com/css?family=Grand+Hotel’ rel=’stylesheet’ type=’text/css’>mentre in Font Fallback List
‘Grand Hotel’, cursiveOra clicchiamo su “Save” per salvare le nostre modifiche.
Selezioniamo il nostro testo, a sinistra appariranno le proprietà dell’oggetto.
Nella tendina all’interno di Text sarà apparso il nuovo font
‘Grand Hotel’, cursive.
Selezioniamolo per applicarlo al testo.
CSS E @font-face
Nel caso abbiate già i fonts e non volete usare i servizi web elencati qui sopra, potete convertirli in web fonts tramite servizi online come ad esempio il font-face creator di FontSquirrel.
Dopo averli convertiti inserite nella stessa cartella della vostra animazione una cartella “fonts” contenente i vari fonts compatibili con tutti i browser (eot, ttf, svg, woff) a questo punto nella finestra Edit Web Fonts andiamo ad inserire in Embed Code
<style>
@font-face {
font-family: ‘YourFontName’;
src: url(‘fonts/yourfontname-webfont.eot’);
src: url(‘fonts/yourfontname-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘fonts/yourfontname-webfont.woff’) format(‘woff’),
url(‘fonts/yourfontname-webfont.ttf’) format(‘truetype’),
url(‘fonts/yourfontname-webfont.svg#YourFontName’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
</style>mentre in Font Fallback List
‘YourFontName’, sans-serifOra clicchiamo su “Save” per salvare le nostre modifiche.
Selezioniamo il nostro testo, a sinistra appariranno le proprietà dell’oggetto.
Nella tendina all’interno di Text sarà apparso il nuovo font
‘YourFontName’, sans-serif.
Selezioniamolo per applicarlo al testo.
Se avete domande relative a questo tutorial o su argomenti correlati, lasciate un messaggio qui sotto.
