Web fonts in Adobe Edge Animate

Adobe Edge Animate has had the ability to use web fonts in earlier versions of the software, version 1.5 just makes it easier. Web fonts are fonts that are downloaded from a server to the user’s computer or device. This allows a designer to select fonts that the user may not have installed, but will be automatically downloaded them to their device when required. Edge web fonts are fonts that have been provided by Google, Adobe and font designers for free.

Adding web fonts

First you need to create some text, so grab the Text Tool (indicated in red below), click on the document and get typing. I have typed: Daisy Fields and increased the text size in the Properties panel. 

Adobe Edge

To select a web font, select the text and click on the Add a web font button (indicated in red below).

Adobe Edge

Scroll the list of web fonts, you can also click on icons that represent the different categories of icons to help with your selection (indicted by the blue box, below). Once you have found a font you like, click on it, your text will then change to show you a preview. To apply the font click on the Add font button.

Adobe Edge

Fall-back Web fonts require internet access to the server hosting the fonts, of course there is a small chance this may not work one day, so a fall-back to a font or font-type that is available is a good idea. When you select a web font a fall-back is automatically added – nice. For example, I chose: Alexa Std, but if I take a look in the Fonts panel I can see: alexa-std, sans-serif is mentioned.

Adobe Edge

San-serif is the fall-back, so if Alexa Std isn’t available it will find a san-serif font to use instead. Double-clicking on alexa-stdsans-serif will allow you to customise the fall-back.

Adobe Edge

More useful features and tweaks are coming soon in version 2.0 of Adobe Edge Animate – so keep coming back for updates.