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, solitamente non presenti sulle macchine degli utenti.

Vedremo come inserire questi fonts attraverso i servizi online di Adobe: Edge Web Fonts e Typekit, di Google: Google Web Fonts e includendoli manualmente tramite css e la regola @font-face.


INTRODUZIONE

Web Fonts in Edge Animate - IntroduzionePartiamo 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

Web Fonts in Edge Animate - Edge Web Fonts #1Edge 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 #2A 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

Web Fonts in Edge Animate - Edge Web Fonts #3Ora 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 (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 #3Per 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 #4Ora 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 #1Per 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 #2Ora 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

Web Fonts in Edge Animate - Google Web Fonts #3Ora 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 *