Using Google Fonts in HTML5 Canvas Documents

Using Google fonts in HTML5 Canvas documents

When you use desktop fonts to create and publish your web outputs, customer experience is not optimal. Animate introduces Google fonts that provide a consistent typographic experience across all form factors. Google fonts are free open source fonts served by Google servers. For more information on Google fonts and the original font designers, see: https://fonts.google.com/about and https://fonts.google.com/attribution.

Advantages of using Google fonts are:

• Caching: After an initial download, the fonts are stored in your local systems and you do not have to download them repeatedly. This loads the text faster. • Open source: They are freely available, and can be redistributed or modified based on your requirements. • Compatibility: They work seamlessly with your advertising and web content. • Responsive: They provide a responsive content experience across all form factors for a consistent aesthetic appeal.

How to on Animate

Open your HTML5 Canvas document and select the Text tool in the Tools panel. In the Properties panel, select Dynamic Text. Click the Add Web fonts icon and select Google Fonts. Select Google fonts dialog box the Google fonts dialog box lists all the available web fonts. 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.

• Search: Searches the font by names. • Category: Filters fonts based on the available categories. • Sort by: Sorts the fonts based on the following categories: • Popularity: Sorts based on the popular fonts. • Alphabet: Sorts an alphabetical list of fonts. • Date Added: Sorts based on the dates when they were added to the document. • Number of Styles: Sorts based on the number of styles available for each font family. • Trending: Sorts based on the trending font categories. • Help: Displays the online Help for Google fonts. • Cancel: Cancels the font selections. • Done: Adds the selected font to the document to Google fonts dialog box

To add a font to the document, click the font that you want to use and select Done. A check mark indicates that the font is selected. Note: You can also select and add multiple fonts.

To view the added fonts in Animate CC, do one of the following: From the main menu, select Text > Font > Web Fonts. From the Property Inspector, select Character > Family. Selected Google font in the Property inspector

In the Character Family drop-down list, select the added Google font to use in an HTML5 Canvas document.

Using the selected font in the document.

When your published SWF files play on computers across the Internet, there is no guarantee that the fonts you used are available on those machines. To ensure that your text maintains the appearance you intended, you can embed entire fonts or specific subsets of characters from a font. By embedding the characters in your published SWF file, you make the font available to the SWF file regardless of the computer that plays the file. Once a font is embedded, you can use it anywhere in your published SWF file. Animate automatically embeds all characters used by any text objects that contain text. Creating an embedded font symbol, yourself allows your text objects to use additional characters, such as when accepting user input at runtime or when editing text with ActionScript. Embedded fonts are not necessary for text objects that have the Anti-alias property set to Use Device Fonts. You specify which fonts you want embedded in your FLA file, and Animate embeds the fonts when you publish a SWF file. There are 4 common situations in which to ensure correct text appearance by embedding fonts in a SWF file: • When creating text objects in your FLA file that are part of a design that requires consistent text appearance. • When you are using an anti-alias option other than Use Device Fonts, you must embed the fonts or text may disappear or appear incorrectly. • When generating text dynamically with ActionScript in your FLA file. • When creating dynamic text with ActionScript, you must specify in ActionScript which font to use. • When your SWF file contains text objects and may be loaded by another SWF file that does not have the required fonts embedded. The Font Embedding dialog box allows you to: • Manage all embedded fonts in one place. • Create font symbols for each embedded font. • Select custom ranges of embedded characters for a font as well as pre-defined ranges. • Work with both Text Layout Framework (TLF) text and Classic text in the same file and use embedded fonts with each. Note that TLF text is unavailable with Animate CC.

To embed characters from a font in a SWF file: With your FLA file open in Animate, open the Font Embedding dialog box by doing one of the following: • Choose Text > Font Embedding. • From the Library panel options menu, choose Add Font. • Right-click in empty space in the Library panel tree view, and choose New Font. • In the Text Property inspector, click on the Embed button. If your font is not already selected in the Font Embedding dialog box, click the Add (+) button to add a new embedded font to your FLA file. When you open the Font Embedding dialog box from the Library or the Text Property inspector, a font item appears automatically in the dialog box. In the Options tab, select the Family and Style of the font you want to embed. If you opened the Font Embedding dialog box from the Text Property inspector or from the Library panel, the font used by the current selection appears automatically in the dialog box. In the Character Ranges section, select the character ranges you want to embed. The more characters you embed, the larger your published SWF file will be. If you want to embed any additional specific characters, enter them in the “Also include these characters” field. To enable the embedded font symbol to be accessed with ActionScript code, select Export for ActionScript in the ActionScript tab. If you selected Export for ActionScript, select an outline format also. For TLF text containers, select TLF (DF4) as the Outline Format. For Classic text containers, select Classic (DF3). You must create separate embedded font symbols for use in TLF and Classic text containers. The TLF (DF4) outline format is not available for PostScript Type 1 fonts. TLF (DF4) requires Flash Player version 10 or later. To edit the parameters of an embedded font symbol: 1. Do one of the following: • Right-click the font symbol in the Library and choose Properties. • Select a text container on the Stage and click the Embed button in the Character section of the Property inspector. • Select the font symbol in the Library and choose Edit Properties from the panel options menu. • Double-click the icon of the font symbol in the Library. • Choose Text > Font Embedding, and then select the font symbol you want to edit in the tree view on the left of the dialog. 2. Make changes in the Font Embedding dialog box and click OK. The tree view in the Font Embedding dialog box displays all font symbols in the current FLA file, organized by font family. You can edit any or all of the fonts while the dialog is open, and the changes will be committed when you press the OK button.