Bryan’s Dev Blog

Fonts bloat swfs, but there are times when you can lessen the size impact by loading them dynamically. I do this most often when a skin is loaded at runtime or a swf has to support multiple languagues. For a lot of larger projects, I always just load the fonts so that they can be swapped easily, thus coping with design changes without recompiling.

Fortunately in actionscript 3, the solution is rather simple. Because of the flash.text.Font class, you can register a font to be used across swfs. For instance say your flash application decides because of user interaction it wants to start using the Goudy font. All is well because you previously made another actionscript 3 project swf whose code consisted wholly of this:

package {
import flash.display.Sprite;

import flash.text.Font;

public class FontFileGoudy extends Sprite
{

//here image/Goudy.ttf points to the font file relative to this file
[Embed(source="image/Goudy.ttf", fontName="Goudy",fontWeight="bold", mimeType="application/x-font-truetype")]
private var font1:Class;

public function fontFile()
{
trace(”Embedded font in loaded swf”);

Font.registerFont(font1);//registers font

trace(”registered font”);
}
}
}

Notice here that I embedded the font by pointing to the actually font file, “image/Goudy.ttf”.

All that your actionscript 3 project would need to do is load the swf created by FontFileGoudy, and then use Goudy at will. You can even check that it is loaded by by looking through the fonts returned by Font.enumerateFonts(). Here is an example class that loads goudy:

package
{

import flash.display.Sprite;
import flash.text.Font;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.system.LoaderContext;
import flash.display.LoaderInfo;

public class Main extends Sprite
{

public function Main(){

var fonts:Array = Font.enumerateFonts();

var font:Font;
for(var x:uint=0; x<fonts.length;x++){

font = fonts[x];
trace(”name : “+font.fontName);
trace(”style : “+font.fontStyle);
trace(”type : “+font.fontType);

}

//load font
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoaded);
loader.load(new URLRequest(”FontFileGoudy.swf”));

}

private function onLoaded(event:Event):void{

trace(”swf loaded”);
var fonts:Array = Font.enumerateFonts();
var font:Font;
for(var x:uint=0; x<fonts.length;x++){

font = fonts[x];
trace(”name : “+font.fontName);
trace(”style : “+font.fontStyle);
trace(”type : “+font.fontType);

}

}

}

}

For actionscript 2 however, the task is much more complicated. I have seen many people use this solution, but I have not found it described well on the web, so I am going to attempt to explain it here.

To dynamically load a font into a swf and then use it in TextFields you will need to:

1. Create a swf with one library item, which is a MovieClip which has a TextField with a font embedded. This library MovieClip will be exported for runtime sharing, for use in a shared library. Let’s call this swf a font swf.

2. Create a swf that uses the item in the library of the font swf, importing it for runtime sharing. This swf also has a callback to its _parent so that another swf loading it will know when its shared library is imported. Let’s call this swf the font loader swf.

3. Load the font loader swf into your application, wait for the callback from the font loader swf, and then use the font.

Click here to view my small no frills example
– Just loads in four different fonts, showing the font before and after it is loaded. They might look pretty similar (for instance if you already have the font on your computer) but you should be able to see the change in each one as it loads.

Source for font loading example

Download the source for this example and open in the Flash IDE src/dinLib.fla. This is one of the fla’s that hold a single MovieClip in its library, and that MovieClip contains one TextField with an embedded font, in this case DIN-Black. If you right click on fontField in the library, and go to linkage, you will see it is exported for actionscript, exported for runtime sharing, and importantly exported in the first frame.

Now open src/dinLoaded.fla in your Flash IDE. You will see that this fla also has only one thing in its library, the same fontField from dinLib.fla. If you right click and again select linkage, you will see that fontField is imported for runtime sharing from dinLib.swf.

Also notice in dinLoaded.fla that an instance of fontField is on the stage in the first frame, and the first frame has a small amount of code:

System.security.allowDomain(’*');
_parent.onFontLoaded();

The first line just allows a swf from any domain to load this swf and use its font. The second line calls back into the swf that loaded this swf, telling it’s parent it can now use DIN-Black.

Thats pretty much it. All of the other fla’s in the source are similar font files, except fontless_example.fla. fontless_example.fla just kicks off the Main.as class that handles loading each font swf when asked.

So this is far from a “pretty” solution for loading fonts dynamically but it is definitely a useable one.

actionscript 2, actionscript 3