Web Fonts in Edge Animate

Web Font in Edge Animate

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“.

Web Fonts in Edge Animate - Introduzione


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”.

Web Fonts in Edge Animate - Edge Web Fonts #1

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”, serif

Ora clicchiamo su “Save” per salvare le nostre modifiche.

Web Fonts in Edge Animate - Edge Web Fonts #2

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.

Web Fonts in Edge Animate - Edge Web Fonts #3

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 (basta creare 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.

In questo recuperiamo 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>
Web Fonts in Edge Animate - Typekit #3

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

“badaboom-pro”, sans-serif

Web Fonts in Edge Animate - Typekit #4

Ora 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
“badaboom-pro”, sans-serif.

Selezioniamolo per applicarlo al testo.


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.

Web Fonts in Edge Animate - Google Web Fonts #1

Per recuperare le informazioni del font andiamo sul sito
Google Web Fonts
e scegliamo un font di nostro gradimento,
io ho scelto “Grand Hotel”.

Web Fonts in Edge Animate - Google Web Fonts #2
Web Fonts in Edge Animate - Google Web Fonts #3

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’, cursive

Ora 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-serif

Ora 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 su questo tutorial o su argomenti correlati lasciate pure un commento qui sotto.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *