Embedding fonts in Animate HTML5 and image compression

[Konrad5CB3]

Hi guys,

We use Adobe Animate very often for our advertising campaigns but there are two things I think need improving. I'm hoping either someone will have better workflow suggestions or perhaps this will reach the dev team and make it into a next update of Animate.

EMBEDDING FONTS:
Ever since I switched to Animate's HTML5 canvas I've always just used the Static Text option, but lately I've been seeing some benefits to using Dynamic Text. (filesize, speed, copy updates, ...) However the issue there is that you can't embed the font via the Animate UI, as far as I know. You have to manually go to Google or Adobe Fonts, look up your font, copy the embed code and the best way I found was to add the @Import font family code to my HTML/JS publishing template. Surely there must be a better way of doing this? You'd think Animate would be able to look up the Google or Adobe font and embed it into the HTML or JS file automatically. That would be such an improvement.

IMAGE COMPRESSION:
A second thing that is a massive pain in the ass is the fact that you can't do image compression in HTML5 canvas the same way you could in Flash exports. Now, every single banner campaign we make I have to manually upload all my PNG spritesheet exports for each banner version (in multiple languages ...) to Tinypng.com, compress them, download and extract the ZIP, and overwrite the PNG files in each folder. It's such a hastle and surely there should be a way for Animate to do this natively? TinyPNG literally reduces the PNG size 50-70% with next to no image quality loss. Perhaps Adobe can partner with TinyPNG or something? They do offer an API on their website but we're not technical enough to build that into our workflow. If anyone knows a better way of doing this, I'd really appreciate it! Because this costs us a lot of time and money on every single campaign we do.

Thanks in advance! *fingers crossed*

[JoãoCésar]

Hi.

EMBEDDING FONTS:

Animate has support for web fonts in the IDE. You have to select a dynamic text field, go to the Properties panel and click on the Add web fonts button (a little globe) under the Character section. Then you have access to Adobe Fonts and Google Fonts. A major limitation of Animate is when we need fonts that are not from Adobe or Google. Then we have to manually insert the fonts and sometimes they are not displayed correctly on some devices/browsers.

IMAGE COMPRESSION:

I totally agree.

Regards,

JC

[principemm]

I am embedding fonts as well, just not web fonts. I originally did in Flash CS6 and am now updating to Animate v24.  Apparently, it doesn't like that I have a regular, bold and italic version embedded. It says they are merged and can only use one. "Warning: Font symbols targeting the same font are merged so only one class will be exported. Class ArialBold is not exported." So, I have to use regular and then with code tell a textfield to be bold. Is this correct? 

[kglad]

@principemm 

i don't see a problem.  what exactly are you doing to trigger that message?

[principemm]

The error happens during publish. In Flash CS6 it wasn't an issue. In Animate 24 I get the warning as mentioned above. The publish action will merge, keep one class , and not export the other ones. Example, my text fields that use regular will look ok, but the ones that should be bold show up as blocks - as if the font doesn't exist.  Again, all fonts worked great in CS6.   This is going to be in a game engine which has had no issues in the past, but if the fonts are not embedded, it won't work. The issues is that not all the fonts are being embedded. So the change from Flash is that now I would have to only use Arial (regular) for all text fields and change to Bold format via code for all fields that require it.   In the library:

[kglad]

in cs6 you couldn't create an html5 file.

[principemm]

No, I created a swf and in the swf it worked just fine. Now I have to make HTML5 which works except for the font embedding. 

[JoãoCésar]

@kglad I think it was already possible by using an extension instead of a new document type.

https://en.wikipedia.org/wiki/Adobe_Flash

[principemm]

I dont' need the swf now, I just need the HTML5 export to have the ability to have reg, italic and bold of the same font.  In Flash, it worked, in Animate I get the errors.  Is it possible or do I have to only use regular and change to bold via code?  Thanks!

[JoãoCésar]

@principemm How are you embedding the fonts? And have you redone the same process in Animate?

[principemm]

Thanks for helping. I use the standard process. I create a textfield, choose font, then click the button to embed.  I did this for several textfields with some using regular, some bold, some italic.  From then on I use the font with a * after it so that I'm only using embedded fonts. I've been doing this since Flash came out. 

[principemm]

What bothered me is that in Flash I could have multiple font classes for the same family and now I can only have one.   "Warning: Font symbols targeting the same font are merged so only one class will be exported. Class ArialBold is not exported." 

[kglad]

your screenshot shows an as3 document, not canvas.  with which document type are you having a problem?

[principemm]

The screenshot is from the Animate IDE where you can embed fonts.  The code is all as3 classes. Animate exports to an HMTL5 documet.  Of course, I can also export to swf, but I'm not doing that now.  I'm embedding the same way that I would have done in Flash as you can see in the screen shots.  

[kglad]

html5 doesn't use as3.

[principemm]

That's true, but the IDE is the same. The project started as as3 and now is HTML5. Regardless of the language, the fonts with multiple types of the same font class get merge and Animate only embeds one, such as regular. It won't embed the bold or italic of the same font class. So far the only way to do it is to embed regular and then via code (javascript), is to set a textformat as bold or italic where desired. I'm trying to find out if there is another way to embed multiple font style classes of the same font family.  

[kglad]

the ide is not the same. isrr no problem with either ad3 or canvas, but in order to help you, it matters.