Loading fonts in dynamically in AS3 is so much better than AS2. If you want to have an external library of fonts that you only load as you need then this is the way to go. Create some SWF files that only contain the font combinations that you will need and then load them in to use using this FontManager class.
package com.sitedaniel.text
{
import flash.display.Loader;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.EventDispatcher;
import flash.net.URLRequest;
import flash.system.ApplicationDomain;
import flash.text.Font;
public class FontControl extends EventDispatcher
{
public static const COMPLETE:String = "font_load_complete";
public static const ERROR:String = "font_load_error";
public static var FONTS:Array;
private var _loader:Loader;
private var _domain:ApplicationDomain;
public function FontControl() {
}
public function load(path:String, fontArr:Array):void
{
FONTS = fontArr;
_loader = new Loader();
_loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, _ioErrHdlr);
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, _loadComplete);
_loader.load(new URLRequest(path));
}
private function _loadComplete(e:Event):void
{
_domain = _loader.contentLoaderInfo.applicationDomain;
_registerFonts();
var embeddedFonts:Array = Font.enumerateFonts(false);
}
private function _registerFonts():void
{
for (var i:uint = 0; FONTS[i]; i++)
{
Font.registerFont(_domain.getDefinition(FONTS[i].id) as Class);
}
dispatchEvent(new Event(COMPLETE));
}
private function _ioErrHdlr(e:IOErrorEvent):void
{
trace(e);
dispatchEvent(new Event(ERROR));
}
}
}
Using this font control you can have multiple libraries of fonts that you choose to load at runtime. Generally the library you load is determined by the language and character support that you need. When you call _fontControl.load(…) you can have a switch statement to load in and register different fonts for each language that you need. Of course you need these font SWF files set up correctly. In ‘font_hei.swf’ that this example is loading in, there are two fonts set up to export with the linkage IDs of ‘FontHei’ and ‘FontMain’. These fonts are ‘AdiHaus Bold’ and ‘Hei’ respectively. ‘Hei’ is a Chinese font and about 3M in size. There is no way I want to load this font if I don’t have to.
Then when you create your FontLoader instance, you pass in the path and an object that reflects these font names and ids:
_fontControl = new FontControl();
_fontControl.addEventListener(FontControl.COMPLETE, _fontsLoaded);
_fontControl.load("swf/font_hei.swf", [{font:"AdiHaus Bold", id:"FontMain"},
{font:"Hei", id:"FontHei"}]);
The ‘FontMain’ actual font name is ‘AdiHaus Bold’.
Then when you want some dynamic text, you can either use the font name that you’ve just loaded, ‘AdiHaus Bold’
var tf:TextField = new TextField();
var fmt:TextFormat = new TextFormat('AdiHaus Bold', 30, 0x000000);
tf.autoSize = TextFieldAutoSize.LEFT;
tf.embedFonts = true;
tf.text = 'Lorem Ipsum...';
tf.setTextFormat(fmt);
this.addChild(tf);
or use a static variable reference in the font Manager, FontControl.FONTS[1].font
var fmt:TextFormat = new TextFormat(FontControl.FONTS[1].font, 30, 0x000000);
I prefer using this static var method as you can change the font of a complete site just by updating the library that loads in.
UPDATE: 6th Jan 2010 – removed unnecessary use of DynamicEvent class, now just standard Event class
I am curious if you can send me the AdiHaus font for mac. I am doing a job that requires it right now, but only have a pc version. you can email me at: jacob-at-kineticz-dot-net thank you
Hi Jacob,
Sorry but I don’t actually have the font. I was working at a creative agency at the time.
Cheers
Hi Jacob
My problem is the reversed, i have the MAC version but needs the PC version!
Maybe we can swop type!
Mikael
Hi! good tutorial! Appreciated!
but tell me how can i do the same in Action script 2.0
acknowledge please!…….
Hi sherest
Unfortunately this method doesn’t work in AS2.
There are a few ways around it though but they are more complicated and not as natural. I suggest you take at look at the CASA framework here http://casalib.org/blog/dynamic-font-loading/
Be warned though that dynamic fonts in AS2 are likely to make you frustrated!
Hi Daniel,
the class is working fine.
But I have a problem. I put in the textfield a html-formatted string.
But the bold and italic HTML-Tag does not work. ist working fine.
I have imported the Font exact like you, when i set the checkboxes bold and italic, flash will show me the complete text in bold and italic.
How can i fix it?
Thank you very much for your help,
Jens
Hi Jens,
If you are using a Mac then you will need to include the bold and italic versions of the font in your library and then use them when you need them. On a PC in the past I have used CSS and created a CSS value for the bold and italic. You can use < span class='my_bold' >…< /span > as long as you have a reference to ‘my_bold’ in your CSS
eg.
.my_bold {
font-weight: bold;
}
bear in mind that italic is a font-style and not a font-weight
Here is a list of CSS properties supported by Flash
color : hex value only. e.g. #000000
display : inline, block, none
font-family : font name list
font-size : number
font-style : normal, italic
font-weight : normal, bold
kerning : boolean
leading : number
letter-spacing : number
margin-left : number
margin-right : number
text-align : right, left, center, justify
text-decoration : none, underline
text-indent : number
fonts adi Haus Bold is requrired
Hi, somehow I don’t get it to work.
Do you have a working sample file?
Hi WoW,
I’ve created a small example for you that can be downloaded from here http://blog.sitedaniel.com/downloads/fontExample.zip
Before you recompile the font.fla, bear in mind that the font I have used might not be one that you have. If you don’t have this font then obviously this example won’t work once you recompile.
I think where people can go wrong with this is using the correct names when calling the load. You must have not only the correct Linkage name, but also the actual internal font name. Flash doesn’t always use the same name internally as what we see, so the best way I’ve found to make sure that you’re using the right name is to create an instance of the new font in your font.swf and trace the name:
var f:Font = new FontKroeger();
trace(f.fontName);
Then once you use this internal name in your load arguments it should be ok.
I have found in the past that sometimes some foreign character sets do not get embedded using this method, and I’ve had to go back to the old method of embeddeding the characters I want into a textfield on the stage, but most of the time this should do everything you need.
Cheers
Daniel
Excellent code for solution load embeded fonts from external swfs in AS2:
http://www.astrodreams.com/aaa/as2_embed_and_load_external_fonts.rar