Using web fonts in HTML5 Canvas documents

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.

    Font in use
    Using the selected font in the document

  7. Publish the document.


    Output generated via the TestMovie option is meant for preview only. Use the File > Publish option to generate the output for final deployment.

Adobe logo

Sign in to your account