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.

INTRODUCTION

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

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

When 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

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

A popup opens, on this select the font and click on “Embed Code“, a modal opens then 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>

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

Then copy/paste this fallback code:

“badaboom-pro”, sans-serif

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

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

Now 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

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

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 message below.