Cameron Yule

Embedded fonts and the Text Layout Framework

Adobe’s Text Layout Framework, in combination with the new text engine in Flash Player 10, is finally giving Flash developers the kind of typographic control we’ve needed for years. Feature highlights include bi—directional and vertical text, support for over 30 writing systems, flowing text across multiple columns and vastly improved character formatting including kerning, ligatures and typographic case.

While a few tutorials on it have been appearing in the last few days, notably Using the Text Layout Framework in Flex 3.2 and AIR 1.5, there’s still a lack of information on how to use embedded fonts which as we all know is necessary if you want to use non-standard fonts or tween the alpha property of your text.

Flex 4 SDK / Flash Professional CS4

From the Text Layout Framework release notes;

DefineFont4 is a new embedded font format used by the new text engine in Flash Player 10 providing improved typography, international support and reduced font size. The new text engine does not support any of the previous SWF embedded formats such as DefineFont3 generated by Flash CS3 Professional or Flex 3. You will have to use Flash CS4 Professional or Flex Gumbo to embed fonts using the DefineFont4 format.

This means that to use embedded fonts with the TLF, you have to use either the Flex 4 (“Gumbo”) SDK, which is currently still in Beta, or Flash Professional CS4.

Moving to Flex 4 SDK

If you’re currently using the Flex 3 SDK and want to move to Flex 4, there’s a handy tutorial on the Flex Examples blog, Using the beta Gumbo in Flex Builder 3.

A word of warning is that several of the nightly builds and the latest stable build refuse to run on OS X. I wasn’t alone with this problem, both Richard Leggett and Aral Balkan have been bitten too as you’ll see in the comments on Richard’s blog post, Upgrading Flex 3/AIR Projects to Gumbo/Flex 4.

For the time being, I’m using the Adobe MAX preview (build 4.0.0.4021) version.

Embedding fonts

Here’s an example of how to embed a font in AS3, the important new part to notice is the cff="true", which is a reference to the Compact Font Format required by the new text engine.

package com.cameronyule.fonts
{
	import flash.text.Font;
 
	public class AFont extends Font 
	{
		[Embed(source="/path/to/fonts/AFont.ttf", fontFamily="AFont", cff="true")]
		private var _a_font:String;
 
		public static const NAME:String = "AFont";
 
		public function AFont() 
		{
			super();
			_a_font;
		}
	}
}

Using your embedded fonts

There are two main ways to use the Text Layout Framework, TextFlows and TextLines. TextFlows are better for larger blocks of text while TextLines are good for single lines of text.

The most important part is actually the character formatting, so while this example uses TextLines you’ll be able to easily transfer it to TextFlows as well.

private function createTextLine(someText:String):void
{	
	var bounds:Rectangle = new Rectangle(10, 10, this.width, this.height);
 
	var paragraphFormat:ParagraphFormat = new ParagraphFormat();
	paragraphFormat.direction = Direction.LTR;
 
	var characterFormat:CharacterFormat = new CharacterFormat();
	characterFormat.fontSize = 18;
	characterFormat.fontFamily = AFont.NAME;
	characterFormat.fontLookup = flash.text.engine.FontLookup.EMBEDDED_CFF;
	characterFormat.renderingMode = flash.text.engine.RenderingMode.CFF;
 
	TextLineFactory.createTextLinesFromString(addTextLineToContainer, someText, bounds, characterFormat, paragraphFormat);
}
 
private function addTextLineToContainer(textLine:flash.text.engine.TextLine):void
{
	this.addChild(textLine);
}

And there you have it, embedded fonts using the new Text Layout Framework.