Font Embedding in Actionscript Projects

While working on Actionscript projects you will have to use fonts quite often. There are many ways how you can embed a font into your project. In this post I will illustrate different ways of how to do that and I would like to demonstrate a very easy way with MojoFont.

Example 1: Font Embedding During Runtime With SWF
Embedding a font with SWF has the advantage that it can be loaded on run-time. This will make the file size of the start-up application smaller and improves loading times. The font will be only loaded if there is a need for it. You will need to have Adobe Flash CS4 or higher for this example.
1) Open a new Actionscript 3 file in the Flas IDE and save it as American.fla
2) Open the action panel and type following:

[Embed(systemFont="American Typewriter", fontName="American",
	   mimeType="application/x-font", unicodeRange="U+0061-U+007A")]
var american:Class;
 
Font.registerFont(american);

systemFont is the actual name of the font on your system.
fontName can be named what ever you want to name it.
unicodeRange is used to define the avaible characters.

I used for this example only lowercase characters. You can change the unicodeCharset to add more characters. A good website to generate the required unicode is http://rishida.net/scripts/uniview/conversion.php

3) Compile the SWF. You will be asked for the Flex SDK Path on your first compile. If you have the Flex SDK press OK and compile again otherwise download first the Flex SDK from opensource.adobe.com/wiki/display/flexsdk. Now you should have a blank SWF.

4) Start a new Actionscript 3 file and save it as Fonttest.fla in the same directory as the other file.
5) Open the action panel and type the following code:

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, fontloaded);
 
loader.load(new URLRequest('AmericanTypewriter.swf'));
 
function fontloaded(e:Event):void{
	var tf:TextField = new TextField();
	tf.width			= 400;
	tf.embedFonts = true;
	tf.defaultTextFormat = new TextFormat('American', 30, 0x000000);
	tf.text = 'hey you';
	addChild(tf);
}

6) Save the file and compile it. You will now load the font from the SWF.

This example is based on the video tutorial from Lee Brimelow. Make sure that you watch his video Tutorial at http://gotoandlearn.com/play?id=102 to dive deeper into loading fonts with external SWF.

Download Sourcecode including FLA

Example 2: Font Embedded In Flash.

Using the [Embed] tag: The font needs to be accessible in your Actionscript project during compile time.

package {
	import flash.display.Sprite;
	import flash.text.AntiAliasType;
	import flash.text.TextField;
	import flash.text.TextFormat;
 
	public class FontEmbeddingEmbedTag extends Sprite
	{
 
		[Embed(source="Arial.ttf", fontFamily="foo")]
		public var bar:Class;
 
		public function FontEmbeddingEmbedTag()
		{
			var format:TextFormat              = new TextFormat();
			format.font                      = "foo";
			format.color                = 0xFFFFFF;
			format.size                 = 30;
 
			var label:TextField         = new TextField();
			label.embedFonts            = true;
			label.width                    = 300
			label.defaultTextFormat     = format;
			label.text                  = "Hi michaelfretz.com!";
			addChild(label);
		}
	}
}

Download Sourcecode

Example 3: The MojoFont Way
My favorite way of embedding a font into an Actionscript project is using MojoFont.
You may ask, what is MojoFont? MojoFont is an Eclipse Plugin for embedding Fonts, developed by Philipp Laeubli. MojoFont is still in private beta but will be released soon as a public beta.

Example 3.1: Embedding A Single Font For Basic Textfields With MojoFont
1) Apply for a private beta account at http://mojofont.badmojo.ch and install it as soon as you get the url for the eclipse update-site.
2) Start Flex or FDT and open a new or existing Actionscript 3 project.

MojoFontTutorial01

3) Go to File -> Import ->Other

MojoFontTutorial02

4) Choose MojoFont -> Import and convert Font

MojoFontTutorial03

5) For the First Tutorial we choose the import mode: “Import a font with a single style”. This option will allow us to use only one style of th font. A single style font can not be used for HTML textfield. You can make a font bold or italic but to do that you have to import the font with “import font with multiple font style”. I will show the import of fonts for HTML textfield in the next example further down.

MojoFontTutorial04

6) Choose a font you want to use and press “Next >”.

MojoFontTutorial05

MojoFontTutorial06
7) Select a location in your project where the compiled SWC should be saved. The path to this SWC will be automatically added to your project properties and if you decide to delete a font you have to delete this path too. (Right-click on your project name->Properties->Actionscript Build path->Library path) For the Charset Range we use “Default / All”. If you only need some caracters and want to keep the filesize low you can change the settings to “Predefined” or “Custom”.

MojoFontTutorial07
8) A quick example how to use it will be shown before you press Finish.

MojoFontTutorial08

9) This is how your Sourcecode should look like if you want to embed a font with MojoFont.

MojoFontTutorial09

package {
	import flash.display.Sprite;
	import flash.text.TextField;
 
	public class MojoFontBasic01 extends Sprite
	{
		public function MojoFontBasic01()
		{
			var txt:TextField 	= ComicSansMSRegular.createTextField();
			txt.text		= 'Hi michaelfretz.com';
			addChild(txt);
		}
	}
}

10) The compiled version will look like that

MojoFontTutorial10

Download Sourcecode

Example 3.2: Same As Before But With TextFormat

package {
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFormat;
 
	public class MojoFontBasic02 extends Sprite
	{
		public function MojoFontBasic02()
		{
			var txtFormat:TextFormat 	= ComicSansMSRegular.createTextFormat(20);
			txtFormat.color			= 0xff8c00;
			txtFormat.kerning		= 2;
			var txt:TextField		= ComicSansMSRegular.createTextField();
			txt.defaultTextFormat		= txtFormat;
			txt.text			= 'hi michaelfretz.com';
			txt.selectable			= false;
			txt.width			= 300;
			txt.rotation			= 20;
			addChild(txt);
		}
	}
}

Download Sourcecode

Example 3.3: Text As HTML Textfield

If you want to use HTML text with your MojoFont import, you need to use “Import multiple Font Style” instead of “Import a font with a single style”. This will bring you up this window.

MojoFontTutorial11

You can choose for all styles a suitable font. You can even mix fonts in a HTML textfield. The rest will be more or less the same. Here the sourcecode.

package {
	import flash.display.Sprite;
	import flash.text.TextField;
 
	public class MojoFontAdv01 extends Sprite
	{
		public function MojoFontAdv01()
		{
			var txt:TextField = Helvetica.createTextField();
			txt.htmlText = '<strong>Hi</strong> <em>michael</em> fretz';
			addChild(txt);
		}
	}
}

Download Sourcecode

Example 3.4: HTML Text Same As Before But With TextFormat

package {
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFormat;
 
	public class MojoFontAdv02 extends Sprite
	{
		public function MojoFontAdv02()
		{
			var txtFormat:TextFormat	= Helvetica.createTextFormat();
			txtFormat.size				= 20;
			txtFormat.color				= 0xff8c00;
			txtFormat.underline			=  true;
			var txt:TextField			= Helvetica.createTextField();
			txt.defaultTextFormat		= txtFormat;
 
			txt.multiline				= true;
			txt.width					= 300;
			txt.wordWrap				= true;
			txt.rotation				= 30;
			txt.htmlText				= '<strong>hi</strong>
<em>michaelfretz.com</em>'
			addChild(txt);
		}
	}
}

Download Sourcecode

Live Demo

If you want to see a live demo of MojoFont join me at the LA Flex User Group meeting in Santa Monica January 13, 2010 from 7:00pm – 10:00pm where I will held a short presentation about MojoFont. We meet at 12304 Santa Monica Blvd, Suite 215A. California, USA.

or

Join us for the Los Angeles Flash User Group meeting on January 20, 2010 at 525 Venezia Ave. Venice, CA 90291 www.laflash.org where I will talk about FontEmbedding in Actionscript projects.

Thanks

Many special thank to Philipp Laeubli who is the developer and founder of MojoFont. Please visit his project website.