The Morphic Group

I regularly have problems embedding fonts in my SWF files. There are a variety of different ways to embed fonts; many of which are detailed in the documentation. I am going to show my preferred way to embed fonts that solve many of the problems are arise when embedding fonts in other ways.

One of the biggest issues that I have run into is making a font available for use in both a .css file and in a TextFormat object. It is difficult for me to reference a font that is embedded in a .css file from an AS3 code line that is setting the properties of a new TextFormat object, for instance. This solution also works with both projects that use the mx.core.* framework (a Flex Project) and also pure AS3 projects. This solution works with BitmapFonts like the ones you might find on http://www.fontsforflash.com/.

The solution involves making a Fonts.as class that embeds the font definitions and registers them with the global Font object.  This enables referencing of fonts by name from anywhere within your application - CSS, AS3, or MXML files.  I like to make a Flex Library project to hold all the font information.  This allows me to use the same embed code for multiple project - and if desired - make the font.swc into an RSL for runtime sharing between multiple SWFs on your Web site.  You could potentially also achieve runtime loaded font definitions with this method - but that is a story for a different day.

PART 1 - Make the font Flex Library Project project

Step 1 – Open Flex Builder and make a new Flex Library Project. Name the project font.

Step 2 – Add font assets. I prefer to create a src/assets/fonts/ directory to hold my assets. The font assets can be either
A) .TTF file
B). SWF file by following the instructions from the docs found here: http://livedocs.adobe.com/flex/3/html/help.html?content=fonts_09.html

Step 3 – Create a new .as file in your /src directory named Fonts.as

Step 4 - Add this code to Fonts.as

package
{
	import flash.text.Font;
	import flash.text.TextFormat;
 
	/**
	 *  This class sets up the fonts for the application.
	 */
	public class Fonts
	{
	// Embed a TTF file
        [Embed(source='assets/fonts/BOOTLE__.TTF', fontName='BOOTLE', mimeType='application/x-font')] // http://famousfonts.smackbomb.com/fonts/thebeatles.php
        private static var BOOTLE:Class;
 
        [Embed(source='assets/fonts/squealer.TTF', fontName='Squealer', mimeType='application/x-font')] // http://famousfonts.smackbomb.com/fonts/acdc.php
        private static var Squealer:Class;
 
        // Embed a font located inside a SWF file
        [Embed(source='assets/fonts/embededFonts.swf', fontName='Frutiger LT 45 Light')]
        private static var FrutigerLT45Light:Class;
 
	[Embed(source='assets/fonts/embededFonts.swf', fontName='Frutiger LT 45 Light', fontWeight='bold')]
        private static var FrutigerLT45LightBold:Class;
 
	[Embed(source='assets/fonts/embededFonts.swf', fontName='Frutiger LT 45 Light', fontStyle='italic')]
        private static var FrutigerLT45LightItalic:Class;
 
	[Embed(source='assets/fonts/embededFonts.swf', fontName='Frutiger LT 45 Light', fontWeight='bold', fontStyle='italic')]
        private static var FrutigerLT45LightBoldItalic:Class;
 
		/**
		 * Constuctor
		 */
		public function Fonts()
		{
			// Register the font with the global Font manager class
			Font.registerFont(BOOTLE);
			Font.registerFont(Squealer);
			Font.registerFont(FrutigerLT45Light);
			Font.registerFont(FrutigerLT45LightBold);
			Font.registerFont(FrutigerLT45LightItalic);
			Font.registerFont(FrutigerLT45LightBoldItalic);
		}
 
		/**
		 * A utility function
		 *
		 * @param font	A font object
		 * @return 	A sting of the font name combined with the font style
		 */
		public static function getUniqueFontName(font:Font):String
		{
            		return font.fontName + ":" + font.fontStyle;
		}
		// A convienent place to declare TextFormat objects that will be used in multiple location
		public static var textFormat1:TextFormat = new TextFormat("Squealer", 12, 0x000000);
		public static var textFormat2:TextFormat = new TextFormat("BOOTLE", 12, 0x000000);
		public static var textFormat3:TextFormat = new TextFormat("Frutiger LT 45 Light", 14, 0x000000);
		public static var textFormat3Bold:TextFormat = new TextFormat("Frutiger LT 45 Light", 14, 0x000000, true);
		public static var textFormat3Italic:TextFormat = new TextFormat("Frutiger LT 45 Light", 14, 0x000000, null, true);
		public static var textFormat3BoldItalic:TextFormat = new TextFormat("Frutiger LT 45 Light", 14, 0x000000, true, true);
 
	}
}

PART 2 – Make a project(s) that will use the font Flex Library Project

- AS3 PROJECT –
Step 1 - Create a new ActionScript Project  (File --> New --> ActionScript Project)

• Name the project AS3FontTest
• Click Next button
• Click Library Path tab
• Click Add Project button
• Select font and click OK
• Click Finish button

Step 2 - Add this code to the AS3FontTest.as file

package {
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.text.AntiAliasType;
	import flash.text.GridFitType;
	import flash.text.TextField;
	import flash.text.TextFormat;
 
	// Use meta-data to set the height and width of the SWF
	[SWF(width="200", height="200")]
 
	/**
	 *  Class used to test embeded font
	 */
	public class AS3FontTest extends Sprite
	{
		private var tf:TextField;
		private var yPos:int = 0;
 
		/**
		 * Constructor
		 */
		public function AS3FontTest()
		{
			// Set some SWF paramaters
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
 
			// Draw the text
			draw(Fonts.textFormat1); // Use the static instance of a TextFormat object from the Fonts.as class
			draw(Fonts.textFormat2);
			draw(Fonts.textFormat3);
			draw(Fonts.textFormat3Bold);
			draw(Fonts.textFormat3Italic);
			draw(Fonts.textFormat3BoldItalic);
		}
 
		/**
		 * Method used to draw the UI bits and attach them to the screen
		 */
		private function draw(textFormat:TextFormat):void
		{
			tf = new TextField();
			tf.defaultTextFormat = textFormat;
			tf.embedFonts = true;
			tf.antiAliasType = AntiAliasType.ADVANCED; // Set this to what looks best for your font
			tf.thickness = 0; // Set this to what looks best for your font
			tf.sharpness = 0; // Set this to what looks best for your font
			tf.gridFitType = GridFitType.SUBPIXEL; // Set this to what looks best for your font
			tf.x = 10;
			tf.y = 10 + yPos;
			tf.width = 180;
			tf.text = "ABC123";
 
			// Add the created TextField to the stage
			addChild(tf);
 
			yPos += 18;
		}
	}
}

Step 3 - Run the project and you should see the embedded font(s) as expected

- FLEX PROJECT –
Step 1 - Create a new Flex Project (File --> New --> ActionScript Project)

• Name the project FlexFontTest
• Click Next button
• Click Library Path tab
• Click Add Project button
• Select font and click OK
• Click Finish button

Step 2 - Make a new directory /src/assets/styles

Step 3 -  Make a new CSS file in that directory named styles.css
Step 4 -  Add this code to styles.css

/* CSS file */
.bootle {
    fontFamily: "BOOTLE";
    font-size:12;
    color: #000000;
}
.squealer {
    fontFamily: "Squealer";
    font-size:12;
    color: #000000;
}
.frutiger {
    fontFamily: "Frutiger LT 45 Light";
    font-size:12;
    color: #000000;
}
.frutigerBold {
    fontFamily: "Frutiger LT 45 Light";
    font-size:12;
    font-weight:bold;
    color: #000000;
}
.frutigerItalic {
    fontFamily: "Frutiger LT 45 Light";
    font-size:12;
    font-style:italic;
    color: #000000;
}
.frutigerBoldItalic {
    fontFamily: "Frutiger LT 45 Light";
    font-size:12;
    font-weight:bold;
    font-style:italic;
    color: #000000;
}

Step 5 -  Add this code to the FlexFontText.mxml file that was created when you made the project

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="created()">
	<mx:Script>
		<![CDATA[
			private function created():void
			{
				// Instantiate the Fonts class
				new Fonts();
 
				// Reference the embeded font name by it's string name
				var tf:TextField = new TextField();
				tf.defaultTextFormat = new TextFormat("Frutiger LT 45 Light", 12, 0x000000);
				tf.embedFonts = true;
				tf.antiAliasType = AntiAliasType.ADVANCED;
				tf.text = "ABC 123";
 
				fontHolder.addChild(tf);
			}
		]]>
	</mx:Script>
 
	<mx:Style source="/assets/styles/styles.css"/>
 
	<mx:VBox x="10" y="10">
		<mx:UIComponent id="fontHolder" height="20"/>
		<mx:Text styleName="bootle" text="ABC 123"/>
		<mx:Text styleName="squealer" text="ABC 123"/>
		<mx:Text styleName="frutiger" text="ABC 123"/>
		<mx:Text styleName="frutigerBold" text="ABC 123"/>
		<mx:Text styleName="frutigerItalic" text="ABC 123"/>
		<mx:Text styleName="frutigerBoldItalic" text="ABC 123"/>
	</mx:VBox>
 
</mx:Application>
 

Step 6 - Run the project and you should see the embedded font(s)

I hope this illustrated a way to simplify font embedding in Flash that allows for use in TextFormat object or in CSS files.

--jason

Tags: as3, CSS, embed, Flex, FlexBuiler, font, registerFont, style, swf, TextFormat, ttf
Posted in ActionScript, Flex, Technology

This entry was posted on Friday, March 20th, 2009 at 2:07 pm and is filed under ActionScript, Flex, Technology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.