Working with Typekit Web fonts

Adobe Typekit web fonts are now available for HTML5 Canvas documents in Adobe Animate CC.

With the integration of Typekit with Animate CC, thousands of premium web fonts from quality foundries are instantly available to you in your HTML5 Canvas documents.

You can try a limited selection of fonts from the Typekit library with any level of Creative Cloud plan, and if you’ve subscribed to a paid plan, you’ll have access to the full library with thousands of fonts.

For more information on subscription plans for Typekit, see Web Font Hosting Plans from Typekit.

Unlike self-hosted web fonts, Typekit hosts the fonts that you decide to use in your hosted content. If you select fonts from the Typekit library and then publish your document on the web, Typekit automatically hosts those fonts and connects your Typekit account to your content on the web.

The Typekit library is available to you with your Creative Cloud subscription. For more information, see https://typekit.com/.

You can also buy new Typekit fonts from the Typekit marketplace. Re-launch Animate CC to view the purchased fonts in the All Fonts tab of the Typekit font screen.

 

Using Typekit Web fonts in an HTML5 Canvas document

  1. Open an HTML5 Canvas document and select the Text tool in the Tools panel.

  2. In the Properties panel, select Dynamic Text and click the Add Web fonts button next to the Font Family dropdown box.

    TypeKit-Selection
  3. In the Add Web fonts window that appears, click Get Started.  

    TypeKit-AddWebfonts
  4. The Web fonts dialog lists all the Typekit web fonts that are available to your Creative Cloud subscription plan. You can now select the font that best suits your design needs by browsing through fonts, searching for specific fonts, or filtering by font properties.

    Click Filter to take advantage of any of the following Filters:

    • Classification: You can filter Typekit fonts based on their classifications, such as Serif, Sans Serif and Script.
    • Recommended for: Filter fonts based on Typekit's recommendations for paragraph or headings.
    • Properties: Filter based on properties such as weight, width, and height.
    TypeKit-Search1
  5. Once you find a font that you want to use, simply click on it. A check mark appears indicating the font is selected. You can choose multiple fonts to add at once. The Selected Fonts tab displays all the fonts that you've selected.

    You can click the font preview footer to see all the variations, such as thin, bold, and italic.

    TypeKit-font-variations

    Click OK to add the selected fonts to the Text > Font menu and the Font Family dropdown box under Web fonts category. 

    TypeKit-Fonts-added
    Selected Web font in the Family menu

    Webfonts-under-Font-menu
    Selected Web font in the Font menu

  6. Select the added Web font to use it in your HTML5 Canvas document.

    font-in-use
    Using the selected font in the document

  7. Before publishing your content on the Web, open Publish Settings, click the Web fonts tab, and specify the URL of the page on which your HTML5 content will be hosted. For example, www.adobe.com. You can also specify multiple URLs separated by comma.

    image2016-2-29 16-56-26
    Web font URL box in Publish Settings

    Note:

     

    • The web fonts from Typekit will only load on domain names that are listed in the publish settings. If the fonts don’t work or you see a 403 error from Typekit on your webpage, make sure you have included the website domain in that list and republish the project.
    • "Output generated via the TestMovie option is meant for preview only. Use the File > Publish option to generate the output for final deployment.

See also

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy