Web Fonts in Edge Animate

Web Fonts in Edge Animate

To make your Adobe Edge Animate animations more appealing you can use in texts non standard fonts that usually aren’t installed on client computers.

In this tutorial we will look how to insert these fonts using online Adobe services: Edge Web Fonts and Typekit, Google service: Google Web Fonts and including them using css and @font-face rule.


INTRO

Web Fonts in Edge Animate - IntroductionLet’s create a new Edge Animate animation and insert a text inside it.

To add the web fonts to the animation click on the [+] button that we can find inside Library panel, right to Fonts.
This will opens a new “Edit Web Font” window.


EDGE WEB FONTS

Web Fonts in Edge Animate - Edge Web Fonts #1Edge Web Fonts is a web font library made by Adobe to support Edge Animate and the Edge Tools in the use of web fonts for your creations.

To retrieve the font to include visit Edge Web Fonts
website and choose a font you like, I’ve choosen “Sarina”.

Web Fonts in Edge Animate - Edge Web Fonts #2When you have chosen the font, the process is extremly fast: in the Embed Code field of the Edit Web Fonts window insert this

<script src="http://use.edgefonts.net/sarina.js"></script>

and in Font Fallback List field this

"sarina", serif

Web Fonts in Edge Animate - Edge Web Fonts #3Then click on “Save” button to save the inputs.

Select the text and on the left panel the object proprieties will appears.

In the font dropdown inside Text subpanel will be available the new font
“sarina”, serif.

Select it and the new font will be applied to the text.


TYPEKIT

Typekit is a online service made by Adobe for selling commercial web fonts to include in web creations.

To retrieve the font visit Typekit.com, login (a free Trial account is enough) and choose a font you like,
I’ve choosen “Badaboom Pro“.

In the font page you find a “+ Add to Kit” button, click it to add the font to your personal font library,
then click on “Launch Kit Editor” that you can find on top right of the page.

Web Fonts in Edge Animate - Typekit #1A popup opens, on this select the font and click on “Embed Code“, a modal opens.

Copy the following code and paste it inside Embed Code field of Edit Web Fonts window

<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
Web Fonts in Edge Animate - Typekit #2
To retrieve the code to insert in Font Fallback List field, close the modal but keep the Kit Editor popup open, then click on “Using Fonts in CSS” and copy/paste this fallback code

"badaboom-pro", sans-serif

 

Web Fonts in Edge Animate - Typekit #4Now click on “Save” button to save the inputs.

Select the text and on the left panel the object proprieties will appears.

In the font dropdown inside Text subpanel will be available the new font
“badaboom-pro”, sans-serif.

Select it and the new font will be applied to the text.


P.S.: for offline testing remember to add to your Font Kit preferences the string “localhost, 127.0.0.1” and for online testing the url of your website.


GOOGLE WEB FONTS

Google Web Fonts is a online font library made by Google that like Edge Web Fonts and Typekit let you use web fonts with just a small amount of code and without including fonts on your server.

Web Fonts in Edge Animate - Google Web Fonts #1To retrieve the font visit
Google Web Fonts website
and choose a font you like,
I’ve choosen “Grand Hotel”.

 

Web Fonts in Edge Animate - Google Web Fonts #2Now on the Edit Web Fonts window insert in Embed Code field

<link href='http://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'>

and in Font Fallback List

'Grand Hotel', cursive

Web Fonts in Edge Animate - Google Web Fonts #3Then click on “Save” button to save the inputs.

Select the text and on the left panel the object proprieties will appears.

In the font dropdown inside Text subpanel will be available the new font
‘Grand Hotel’, cursive.

Select it and the new font will be applied to the text.


CSS AND @font-face

If you already have the fonts and you don’t want to use the web services listed above, you can convert the fonts using online services like the font-face creator of FontSquirrel.

After you have converted them insert all the newly created fonts (eot, ttf, svg, woff) in a new folder named “fonts” in your animation folder.

Now open the Edit Web Fonts windows and insert in the Embed Code field these lines

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

and in Font Fallback List

'YourFontName', sans-serif

Obviously remember to change YourFontName with the real name of your font
and yourfontname-webfont with the real filenames of your files.

Then click on “Save” button to save the inputs.

Select the text and on the left panel the object proprieties will appears.

In the font dropdown inside Text subpanel will be available the new font
‘YourFontName’, sans-serif.

Select it and the new font will be applied to the text.


If you have any questions about this tutorial or topics directly related to it leave a comment below.

2 comments on Web Fonts in Edge Animate

  1. –“Now open the Edit Web Fonts windows and insert in the Embed Code field these lines”

    That line confused me for about 10 minutes. You mean “Edge Web Fonts” in the library field.

    1. No, we are all 2 correct 😛 The fact is that on latest Edge version Adobe changed its name: now (Edge 1.5) you can find it on “Add a Web Font” -> “Custom” on the Library.

Leave a Reply

Your email address will not be published. Required fields are marked *