Adobe Creative Cloud

April 27, 2016 /Typekit /

Leverage Typekit Web and Desktop Fonts within Animate CC

Adobe Animate CC allows the use of Typekit fonts in an assortment of project types; animations, rich ads, mobile apps, web interactives, and more. Typekit is flexible, in that certain fonts are useable only on the web as live web fonts – while other fonts can be used both on the web and as installed desktop fonts. If you have a standard Creative Cloud subscription, this includes access to the Typekit service. For more info about Typekit fonts and usage please refer to the article, Web font hosting with Typekit: Plan for pageviews.

Animate and Typekit

There are two different workflows for integrating Typekit fonts within a project, depending upon what sort of publish target you are working with and how you intend to use the font. For example, if targeting HTML5 Canvas, you can use live web fonts from Typekit within Dynamic text fields or as Static text using synced desktop fonts. If targeting an ActionScript based publish target, you will not be able to use live web fonts but you are able to embed Typekit desktop font outlines for use in Dynamic text fields or use the same fonts as Static text.

figure_01

For many projects, regardless of publish target, use of Static text and installed desktop fonts is all that you will ever need. However, there are many scenarios – especially with interactive project types – which require the use of Dynamic text in order to change the text value through code, based upon some sort of user interaction.

This article with examine workflows supporting both scenarios.

Scenario #1: Using Typekit Web Fonts in HTML5 Canvas

Typekit web fonts must be applied to a Dynamic text element within an HTML5 Canvas project. They cannot currently be used on any other project type – so be sure the document you are working on targets HTML5 Canvas to use Typekit web fonts in this way!

You’ll need to select the Text tool and from the Text type dropdown in the properties panel, choose Dynamic.

figure_02

Once Dynamic text has been chosen, we are able to click upon the small icon to the right of the font family selection dropdown. It appears as a small globe, indicating web font selection from Typekit.

Choosing a Web Font from Typekit

Selecting this icon will summon the Add Web Fonts dialog. From here, you can select one or more fonts by clicking on them and making a small checkmark appear. Once we hit OK, the selected Typekit web font references will be included in our HTML5 Canvas project.

figure_03

This all occurs within Animate CC itself – no need to even exit the program when selecting fonts in this way!

Applying chosen Typekit fonts to Text

Now that we have chosen one or more Typekit web fonts to use in Animate CC, we are able to use the font family selector to choose the web font for our Dynamic text element.

figure_04

Note that all Typekit web fonts will be listed at the very top of our font family selection dropdown. If you don’t see it initially – scroll up. You can also select Typekit web fonts from the menu by choosing Text > Font and it will be included at the top of that menu list as well.

figure_05

Typekit Web Font Permissions when Publishing

The Typekit service needs to know which URLs the content will be hosted at in order to know it has permissions to serve the web fonts to that URL. This works just like it does when creating a kit from the Typekit website. You can get more information around this feature from this Typekit Help article on Domains. <https://helpx.adobe.com/typekit/using/domains.html>

figure_06

Within the Publish Settings dialog, we will need to click the Web fonts tab and enter the URL with which the published content will be hosted. Note that when testing locally, all of the Typekit web fonts will render just fine – you only need to do this when preparing to publish your content on a live web server.

figure_07

Scenario #2: Using Typekit Desktop Fonts in HTML5 Canvas and ActionScript Documents

It is also possible to use a good number of the Typekit fonts in your HTML5 Canvas static text or even in ActionScript projects targeting Flash Player and Adobe AIR! This is possible by using the Sync feature from the Typekit website, allowing the use of certain fonts as desktop fonts.

It is important to note that not all Typekit fonts can be used in this way, as many are only for web use.

Choosing a Desktop Font from Typekit

If you log into the Typekit website with your Adobe ID and Creative Cloud subscription, you will be able to locate fonts which can be synced to your Windows or OS X computer by selecting the Sync toggle in the right-hand menu. This selection will ensure that only desktop enabled fonts will appear as part of any filtering you might perform to locate the fonts to use in a project.

figure_08

Once a font is located, simply hover over the font preview and choose + Use fonts in order to sync the selected fonts to your desktop using the Creative Cloud desktop app. The fonts will be downloaded and installed for use as if they were standard fonts to use in any application – including Animate CC.

Applying a Desktop Font to Text

As soon as the selected fonts are synced to your computer, you will be able to select them for use from the Properties panel within Animate CC. These desktop fonts from Typekit can be used as Static text within an HTML5 Canvas or ActionScript based document – or even embedded as a custom font for Dynamic text use within any ActionScript document, including those which target Flash Player, Adobe AIR for Desktop, Apple iOS, or Google Android.

figure_09

Using Dynamic Text in ActionScript Documents

If you choose to use a Typekit font as Dynamic text within an ActionScript document, you’ll likely want to embed the font to ensure your text appears exactly as you intend within the project. If you do not embed the font, and the user does not have that precise font installed on whichever device they are using to view your content or app… they’ll see any Dynamic text displayed with a fallback font.

To accomplish this, simply click the Embed… button when a Dynamic text object is selected, or when you are using the Text tool as Dynamic text. This will open a dialog from within which you can select which specific character sets to use in your embedded font.

figure_10

Once created, your custom embedded font can be selected by the name you provided upon its creation. Now, you can be confident that the chosen Typescript desktop font will look great within your project!

figure_11

Wrapping Up

No matter how you choose to use them, Typekit web and desktop fonts can bring additional levels of expressive creativity to any Animate CC project which includes some textual element. The great thing about having these options is that that you can use web fonts in certain projects which are connected to the web… and still have the freedom to use other fonts just as you would any normal desktop font in your non-HTML5 projects.

Typekit

Join the discussion

  • By Björn - 5:09 AM on April 28, 2016  

    Hi,

    is there any way to include a webfont, which will only be delivered inside the filestructure of the final webproject? I mean: without using TypeKit? My company creates ads for a big brand. This brand has an own company-font, which is – of course – not located in TypeKit. When we create a normal HTML-Ad (without Animate), we can embed a font-file inside CSS and so we can create brand-related text. But when i try to include this local file-related font in any way in Adobe Animate – i fail. From outside the canvas-element i cannot apply styles to a special element in the canvas. And from inside the canvas, i can’t apply CSS-styles to an textfield.

    Maybe there is an easy solution – but so far i found nothing for this problem.

    Björn

    • By Jeremy - 12:54 PM on May 10, 2016  

      Bjorn,

      The easiest solution would be to get a copy of the font on your local system and Animate CC will convert it to outlines on publish. I have also tried using Dynamic fonts in Animate CC using Google fonts and found that if you use Templates that include a call to the Google font you can publish and open the resulting javascript file, search out your text and update the code that contains that text to use the Google font. Not pretty because you need to update the javascript file every time you publish it but it does work. There is probably a more elegant way of doing this using CSS/Templates and code within Animate CC to get the desired result. DCM and other ad serving platforms will not like the call to the website hosting your font if it’s not on their list as Google fonts is. Here is a link to an article explaining templates (it is Greensock specific but will give you a general idea):

      http://greensock.com/animatecc-templates

      Good luck.