Load Multiple Fonts Into Flash

After trying different solutions to load fonts into Flash, I’ve decided this is the best for the types of projects I work on. In this tutorial I’ll show you how to load multiple fonts into Flash using XML, CSS and of course AS3. Download the source here.

Here’s what the final project looks like.

This is one text field, with multiple fonts loaded into it and styled with CSS.

First, create the font swf files you want to use in your Flash project.

1) Create a new file in Flash.

2) Open up the library and select New Font.

3) Select the font you want to use in your project and give it a unique name. I used “Akzidenz-Grotesk BQ Light.” Click “Export for ActionScript.”

4) Select the first frame in the timeline and paste in this code:

import flash.text.Font;
Font.registerFont(fontname);

fontname is the name of the Class field from step 3.

Mine looks like this.

5) Export the file into a folder called fonts.

Repeat steps 1-5 to export more fonts. As a rule of thumb don’t use more than three type faces in your project. A lot of different type faces usually makes your design look horsey. Here’s a good article on using typography.

I export my fonts into a folder called fonts, but you can use your own naming convention, just make sure it matches your XML source path.

Once you have exported your swf files create an XML file. Copy the code below and save it in a folder called “xml.”

<?xml version="1.0" encoding="utf-8"?>
<m21m:fontapp xmlns:m21m='http://www.m21m.com/schema/m21m'>
	<m21m:assets>
		<m21m:font src="fonts/akzidenzGroteskBQBDCnd.swf"/>
		<m21m:font src="fonts/akzidenzGroteskBQLtCD.swf" />
	</m21m:assets>
	<m21m:textfield><![CDATA[<p class="hdr">The quick brown fox jumped over the lazy dog.</p><br/><p class="bdy">The quick brown fox jumped over the lazy dog.</p>]]></m21m:textfield>
</m21m:fontapp>

Change the src attributes to match the location of your font swf files you exported.

Here’s the CSS.

.hdr {
  font-family: Akzidenz-Grotesk BQ Medium Condensed;
  font-size: 20;
  color:#000000;
}
.bdy {
  font-family: Akzidenz-Grotesk BQ Light;
  font-size: 16;
  color:#ff0000;
}

Change the font-family styles to match the name field from step 3 above. Style your CSS however you want. Here’s a reference for more information on CSS in ActionScript 3.

Create a new flash file and add a reference to the class in the class field on the properties panel.

Here’s the actionscript code.

package com.m21m{
	import flash.display.MovieClip;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.events.Event;
	import flash.net.URLRequest;
	import flash.net.URLLoader;
	import flash.text.Font;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	import flash.text.StyleSheet;
	public class LoadFonts extends MovieClip {
		private var allFontsLoaded:int=0;
		private var fontLen:int=0;
		private var htmlText:String;
		private var sheet:StyleSheet = new StyleSheet();
		private var STYLESHEET:String='styles.css';
		private var XMLFILE:String='xml/fonts.xml';
		private var XMLNAMESPACE:String='m21m';
		public function LoadFonts() {
			loadStyleSheet();
		}
 
		/**
		  * Load the style sheet first
		*/
		private function loadStyleSheet() {
			var loader:URLLoader = new URLLoader();
			var req:URLRequest=new URLRequest(STYLESHEET);
			loader.load(req);
			//When the style sheet is loaded load the XML file
			loader.addEventListener(Event.COMPLETE, loadXML);
		}
 
		/**
		  * Parse the XML
		*/
		private function loadXML(event:Event) {
			sheet.parseCSS(event.target.data);
			var xml:URLRequest=new URLRequest(XMLFILE);
			var urlLoader:URLLoader=new URLLoader  ;
			//When the XML is loaded parse the XML
			urlLoader.addEventListener(Event.COMPLETE,parseXML);
			urlLoader.load(xml);
		}
 
		/**
		  * Parse the XML
		*/
		private function parseXML(event:Event):void {
			var xml=XML(event.target.data);
			xml.ignoreWhitespace=true;
			var m21m:Namespace=xml.namespace(XMLNAMESPACE);
			var fonts=xml..m21m::font;
			//the text to display
			htmlText=xml..m21m::textfield.text();
			//total number of fonts
			fontLen=fonts.length();
			//When the XML is parsed load all the fonts
			loadAllFont(fonts);
		}
 
		/**
		  * Load each font
		  * @param fonts all the font nodes from the XML file
		*/
		private function loadAllFont(fonts) {
			//load each font
			for (var f:int=0; f<fontLen; ++f) {
				loadFont(fonts[f].attribute('src'));
			}
		}
 
		/**
		  * font loader
		  *
		  * @param URL the swf file of the font to load
		*/
		private function loadFont(URL) {
			var fontLoader:Loader=new Loader  ;
			var fontLoaderInfo:LoaderInfo=fontLoader.contentLoaderInfo;
			fontLoaderInfo.addEventListener(Event.INIT,initHandler);
			fontLoader.load(new URLRequest(URL));
		}
 
		/**
		  * When the fonts are loaded build the first panel
		  *
		*/
		private function initHandler(event:Event) {
			//the number of fonts currently loaded
			++allFontsLoaded;
			if (allFontsLoaded==fontLen) {
				//When the fonts are loaded build the first panel
				createTextfield();
			}
		}
 
		/**
		  * Once the fonts are loaded create a text field
		*/
		private function createTextfield() {
			var my_txt:TextField = new TextField();
			my_txt.wordWrap=true;
			my_txt.multiline=true;
			var format=new TextFormat();
			format.leading=10;
			my_txt.defaultTextFormat=format;
			my_txt.antiAliasType='advanced';
			my_txt.embedFonts=true;
			my_txt.styleSheet=sheet;
			my_txt.htmlText=htmlText;
			my_txt.x=10;
			my_txt.y=10;
			my_txt.width=320;
			stage.addChild(my_txt);
		}
	}
}

I’ve commented this file pretty well. Basically all it does is loads the CSS file, when the CSS file is loaded it loads the XML file, when the XML file is loaded it loads the font swf files, when all the fonts are loaded it creates a text field and displays our CSS formated text from the XML file.

If you have questions ask in the comments below. Again you can download the source files here.

February 21st, 2010 | Categories: Actionscript |

Yes, you could rewriting this a little to use “embed.” Check this out. http://mx.coldstorageonline.com/index.php?bid=48. You still need to have the typeface some where on your system. Instead embedding a font I’m just loading an swf file with the font embedded. If I switch computers I don’t have to worry about having the font on the computer.

If you come up with something please share it. Thanks.

Comment by admin — March 22, 2010 @ 8:28 am

How do you set it up so that it is working dynamically? I get told that it is best to not have anything in your fla file and to do all your work in .as files. Is that possible with what you have here?

Comment by rebarr — March 20, 2010 @ 2:22 pm