I know this has been a long discussed topic. And I’m not going to re-invent the wheel. I have been searching for a long time now and have found many ways to dynamically load fonts at runtime in AS3, there are a lot of good solutions out there. But yesterday I found a font manager class and WOW, that’s a really smart method. So all I did was wrapping it in another class, to make the handling even easier. Here it is.

You should start with this tutorial for the basic font loader manager class by etcs.ru (translated). Excerpt: “What the fontloader does is reading the swf bytecode and extract all fonts from it and registers it to the flash font class.”

What I did is creating a wrapper class for this, that makes the handling even easier and traces the CSS output file to the output window in the Flash IDE, so you can just copy it and paste in into a new style.css file.

Here is the code to load the fonts and listen to the events:

import net.kaegi.utils.FontManager;
import net.kaegi.events.FontManagerEvent;
var fontManager:FontManager = new FontManager();
fontManager.addEventListener(FontManagerEvent.LOAD_PROGRESS, onFontManagerLoadProgress, false, 0, true);
fontManager.addEventListener(FontManagerEvent.LOAD_COMPLETE, onFontManagerLoadComplete, false, 0, true);
fontManager.addEventListener(FontManagerEvent.LOAD_ERROR, onFontManagerLoadError, false, 0, true);
fontManager.init("resources/fonts.swf", "resources/style.css")

function onFontManagerLoadProgress(event:FontManagerEvent) {
	trace("FontManager LOAD Progress... "+event.params.type+": "+event.params.perc+"% ("+event.params.bytesLoaded +"/"+event.params.bytesTotal+")");
}
function onFontManagerLoadComplete(event:FontManagerEvent) {
	trace("FontManager LOAD Complete!");
	trace(event.params.displayFonts);
	trace(event.params.cssFileOutput);
}
function onFontManagerLoadError(event:FontManagerEvent) {
	trace("FontManager LOAD Error!");
	trace(event.params.msg);
}

Here is the output of the css trace, ready to use: You can copy and paste it into a new style.css file, then edit it to your needs.

.font1 {
	font-family: "Verdana";
	font-size: 12;
	color: #000000;
	/*font-weight: normal;*/
	/*font-style: normal;*/
	/*display: inline; /*inline, block, none
	/*leading: 0;
	/*letter-spacing: 0;
	/*margin-left: 0;
	/*margin-right: 0;*/
	/*text-align: left; /*left, center, right, justify*/
	/*text-decoration: none; /*none, underline*/
	/*text-indent: 0;*/
}

.font2 {
	font-family: "Arial Unicode MS";
	font-size: 12;
	color: #000000;
	font-weight: bold;
	/*font-style: normal;*/
	/*display: inline; /*inline, block, none
	/*leading: 0;
	/*letter-spacing: 0;
	/*margin-left: 0;
	/*margin-right: 0;*/
	/*text-align: left; /*left, center, right, justify*/
	/*text-decoration: none; /*none, underline*/
	/*text-indent: 0;*/
}

.font3 {
	font-family: "Helvetica CY BoldOblique";
	font-size: 12;
	color: #000000;
	font-weight: bold;
	font-style: italic;
	/*display: inline; /*inline, block, none
	/*leading: 0;
	/*letter-spacing: 0;
	/*margin-left: 0;
	/*margin-right: 0;*/
	/*text-align: left; /*left, center, right, justify*/
	/*text-decoration: none; /*none, underline*/
	/*text-indent: 0;*/
}

Here are all the source files.

Some more useful links and resources about this topic:
http://etcs.ru/pre/FontLoaderDemo/
http://www.thetechlabs.com/tutorials/flash/dynamically-loading-fonts-with-fontloader-and-applying-styles-with-css-stylesheet-in-as3/
http://lab.revoke.ca/2010/02/as3-external-font-loading-class/
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/StyleSheet.html

Even though I don’t need it in the font loading method described here, while searching the web I found a nice site to get unicode ranges: http://www.tillschneidereit.de/unicode_range_tool.html If you are embedding your founds using the EMBED tag you might find it useful.

OK, now back to daily business!

Cheers,
Christian

I assume you have downloaded and installed the Flash CMS and everything works fine so far. You’ve tested and played around with it and now want to take the next steps.

Step 1: Embedding the fonts

1. Open “fonts.fla” in Flash.
2. Open the library: you see 2 fonts already defined: “_myfont1″ and “_myfont2″. You are going to owerwrite these 2 and create a third, new font.
3. In the library, create a new font. Name it “_myfont3″. (Note: The CMS will refer to these names. You can define up to 15 different fonts: “_myfont1″ to “_myfont15″).
4. Open “_myfont1″ in the library and choose any font you like. Be sure your export settings are the same as in the screenshot. Repeat these steps for “_myfont2″ and “_myfont3″ with different fonts.

Step 2: Defining textstyles

1. Now open frame 1 (“setup”) in the actions panel to edit it.
2. At the top you can see the styles for hyperlinks. Change it if you like (different colours and decorations).
3. Next, you can find an array “_level0.testFontStyle”. Leave the name for now. There are 3 styles defined: “Body”, “Body bold” and “Headline”. These are the names the user sees and can choose from in the CMS.

Now, type in the fontnames you have embedded. I have used these fonts: “Bumblebee” (_myfont1), “JanicesHand” (_myfont2) and “Gadget” (_myfont3). 

Here the code after all changes:

_level0.testLinkStyle = new TextField.StyleSheet();
_level0.testLinkStyle.setStyle("a:link",{color:"#24A831", textDecoration:"underline"});
_level0.testLinkStyle.setStyle("a:hover",{color:"#177120", textDecoration:"none"});
// --------------------------------------------
_level0.testFontStyle = [];
// --------------------------------------------
f = {};
f.styleName = "Body";
f.font = "_myfont3";
f.size = 12;
f.color = 0x000000;
_level0.testFontStyle.push(f);
// --------------------------------------------
f = {};
f.styleName = "Handwriting in red";
f.font = "_myfont2";
f.size = 15;
f.color = 0x990000;
_level0.testFontStyle.push(f);
// --------------------------------------------
f = {};
f.styleName = "bigger Handwr. in blue";
f.font = "_myfont2";
f.size = 20;
f.color = 0x003399;
_level0.testFontStyle.push(f);
// --------------------------------------------
f = {};
f.styleName = "HUGE Handwr.in pink";
f.font = "_myfont2";
f.size = 45;
f.color = 0xD906F0;
_level0.testFontStyle.push(f);
// --------------------------------------------
f = {};
f.styleName = "The bubble Bumblebees";
f.font = "_myfont1";
f.size = 22;
f.color = 0x003333;
_level0.testFontStyle.push(f);

Step 3: Export fonts.swf and upload it to the server

1. Export fonts.swf for (ActionScript 2!) and upload it into the folder “login” on your server.

Login the CMS and test it. It should look similar to this (of course with your chosen fonts).

Step 4: Create the FLA that loads this content

First, we will create the “fonts_as3.swf”. In this SWF the fonts are embedded for global use all over your website. Create 3 fonts in the library with the settings as shown in this screenshot below.

Step 6: Register the fonts in AS3

Font.registerFont(_myfont1);
Font.registerFont(_myfont2);
Font.registerFont(_myfont3);

import net.kaegi.utils.VarCentral;
var fonts:Array = [];
fonts[0] = ["_myfont1","Bumblebee"];
fonts[1] = ["_myfont2","JanicesHand Regular"];
fonts[2] = ["_myfont3","Gadget"];
VarCentral.getInstance().vars.fontsForCMS = fonts;

In the code above you can see that I use a little class, “VarCentral”. This comes in very handy if you want to store any variables in a central place because you may need them somewhere else in your site. It’s up to you to also use this or do the handling of global vars in your preferred way. The array “fonts” will later be used to replace all occurences of “_myfontX” in the html textfields of the CMS with the corresponding real fonts. This method is very useful, because you are able to change fonts without disturbing the saved html text.

Step 7: Create the SWF that loads the CMS slots

Please download this FLAs. I have commented everything so it should be self-explanatory. It also contains the font_as3.fla. Note that you may have to adjust it to your own fonts.

Below just a reminder that the Flash CMS backend is written in AS2 and your website is written in AS3:

.