How do I include 'Edge Web Fonts' into Edge Animate?

Hi Naffbo,

What do you mean by 'Edge Web Fonts'? The fonts included in the Edge interface are all standard web-safe fonts, so you don't need to package them when you deploy your files. Notice in the Properties/Text panel that there are fallback fonts listed. So if the user doesn't have Arial, it will fall back to Helvetica. If they don't have Helvetica, it will fall back to sans-serif.

Are you trying to package your own set of locally-stored, non-web-safe, display fonts? If so, see this page (written by the talented Sarah Hunt):

http://blogs.adobe.com/edge/2012/01/27/web-fonts-and-edge-together-at-last/

On this page, scroll to "How to Embed Web Fonts Using Local CSS".

You can insert the info for the web fonts you want to use into your page's code.

These pages include information for how to do this:

http://www.edgefonts.com/

http://html.adobe.com/edge/webfonts/#edgeWebFonts

Edge WebFonts is not working as of today, "out of the box" with the JS code provided in Edge Animate...

Agreed. Web fonts, with all the hoopla and fanfare upon release, simply doesn't seem to work inside Edge Animate.

Have you tried to use google fonts? I have used them and they work for me.

When you add your font for example:

Copy paste:

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

and then for font family.

'Finger Paint', cursive;

then select addfont on the addfont screen

As far as Edge fonts, I agree, they do not always work!

Here is a test on webfonts.

I used google webfonts and it seems to work on a pc (chrome, firefox, IE, Safari) and on the iPad (safary and chrome).

Hi, folks-

Carey's response is the only way Edge Web Fonts are currently supported.  We do have a fix for the issue in the next release, but it's not available through the "Add Font" dialog at the moment.

Thanks,

-Elaine

It will be nice to be able to add the Edge fonts and be sure they work in the future. In the mean time, I am using other web fonts to avoid any problem.

By the way the Edge Font collection is pretty nice!

There are other issues with Web Fonts in Edge to be aware of too. Even using Google web fonts, if you set up a web font and later go in and change it in the font panel, you will not be able to apply that font. It is necessary to create any Google Web Font from scratch in EA and then switch your fields to that font.

Also if a Google Font has multiple weights and you choose one outside the "normal" or base weight, that font will not work in EA.

But beyond that Google Fonts have been working great. I haven't tried them with Typekit yet.

On a side personal note, one font I wish was available as a web font is a LCD or LED style font (ideally monospaced) for that retro calculator and digital watch look.

Good tip, Jerry!

Last friday I seen new and yet-to-come Edge Reflow and it already has Edge Webfonts very well integrated in the interface. Hope to see that in Animate anytime soon !

In the code integer, just add some thing like this

List of font :

myFont, Arial, Helvetica

In the code integer

<style type="@font-face {    font-family: 'myFont';         url('font/myFont.ttf') format('truetype');}"></style>

add EOT, SVG... for other browser

Hi, all-

Just wanted to let you guys know that Edge Web Fonts should work better in 1.0.1.  You can now cut and paste the Edge Web Font JavaScript into the Add Font dialog within Animate, add in the font-face name to the title (in quotes if it's multiple words), and then use it as you would Google Webfonts or TypeKit fonts.

Let us know what you think!

Cheers,

-Elaine

This works quite well Elaine - thanks for incorporating this I justed updated my blog with a quick reference walkthrough for those interested.

Darrell

THis is good news indeed! Read the release notes! Thanks!

Excellent news ! now i'm just dreaming of a webfonts panel being a crossover of the one in Muse and the one in Edge Code Preview