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