Web Fonts with Animate CC or Flash HTML5

While experimenting with Adobe Animate CC and creating an HTML5 canvas element, I wanted to use “other” fonts. I found a solution to incorporate Google Fonts.

Step One.

Create dynamic text fields with a default font.
(txtName, txtScore, txtHighScore)

Step Two.

Search for the font you wish to use from Google’s Fonts.
For example: ‘Oswald’

Step Three.

Add the following frame-script in the Actions panel:


     var webfont = "Oswald";
     var link = document.createElement("link");
     link.href = "https://fonts.googleapis.com/css?family="+webfont;
     link.type = "text/css";
     link.rel = "stylesheet";
     document.getElementsByTagName("head")[0].appendChild(link);
 
     applyWebFont(this.txtName,webfont);
     applyWebFont(this.txtScore,webfont);
     applyWebFont(this.txtHighScore,webfont);
 
    function applyWebFont(tf,fontname) {
       var font = tf.font.split(" ");
       font.pop();
       font.push("'"+fontname+"'");
       tf.font = font.join(" ");
     }

Once you export and view in a browser, your fonts will display just like any other html webpage with web fonts. Check it out with the dynamic counter at Mabell’s Zoo Matching Game.