Typekit is now called Adobe Fonts and is included with Creative Cloud and other subscriptions. Learn more.

Working with web fonts from Adobe Fonts

Web fonts from Adobe Fonts are now available for HTML5 Canvas documents in Adobe Animate.

With the integration of Adobe Fonts with Animate, 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 Adobe Fonts library with any level of Creative Cloud plan, and if you have subscribed to a paid plan, you will have access to the full library with thousands of fonts.

For more information on subscription plans for Adobe Fonts, see Web Font hosting with Adobe Fonts.

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

The Adobe Fonts library is available to you with your Creative Cloud subscription. For more information, see You can also buy new Adobe Fonts. Re-launch Animate to view the purchased fonts in the All Fonts tab of the Adobe Fonts screen.

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

  3. In the Add Adobe Fonts window that appears, click Get Started.  

    Add Adobe Fonts
    Add Adobe Fonts
  4. The Add Adobe Fonts dialog lists all the Adobe 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 web fonts based on their classifications, such as Serif, Sans Serif and Script.
    • Recommended for: Filter fonts based on web fonts' recommendations for paragraph or headings.
    • Properties: Filter based on properties such as weight, width, and height.
    Add Adobe Fonts dialog
    Add Adobe Fonts dialog
  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.

    Select fonts
    Select fonts

    Click OK to add the selected fonts. 

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

    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, You can also specify multiple URLs separated by comma.

    Web fonts URL dialog
    Web fonts URL dialog


    • The web fonts from Adobe Fonts 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 Adobe Fonts 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.

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