Turtlebite's Blog

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