Embed Bitmap text into Flex

Image may be NSFW.
Clik here to view.

This article helps you embed pixel sharp fonts (without antialias) into your flex apps. As far as I know you wouldn’t be able to do this just by direct embedding local font file into your flex application, but you gonna need Flash CS4 authoring tool. There are two ways you can make Bitmap text work in flex. You can use pure css method or actionscript method. The downside of both methods is, you have to define and export from flash exact font size you are going to use.

1. Embedding pixel fonts using CSS Style

1. create new .fla file
2. create Dynamic Text field:
   1. set font (Arial, Regular)
   2. set Anti-alias value to Bitmap text [no anti-alias]
   3. important: when embedding Bitmap text, only selected font size is created, select 12pt
   4. set characters to embed
3. export .fla into .swf
4. create flex project and insert the following code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
    @font-face
    {
        src:url("font.swf");
        fontFamily: "Arial_12pt_st";
        fontAntialiasType: "normal";
    }
    
    Text
    {
        fontFamily: "Arial_12pt_st";
        fontSize: 12;
    }
</mx:Style>
<mx:Text text="Abc Def"/>
</mx:Application>

Notice font family name Arial_12pt_st, this is how flash exports Bitmap text at specific font size and font style. This pure css method seems to be cleaner and faster to me, it would even be easier to use it with large scale projects just by separating application and style files.

2. Embedding pixel fonts using ActionsScript

Method is described by Grant Skinner in Bitmap Fonts in Flex (via Flash) article:

1. create new .fla file
2. create Dynamic Text field:
   1. set font (Arial, Regular)
   2. set Anti-alias value to Bitmap text [no anti-alias]
   3. important: when embedding Bitmap text, only selected font size is created, select 12pt
   4. set characters to embed
3. add text field into exportable MovieClip (select text field -> F8 -> MovieClip -> Linkage Class “font“)
4. export .fla into .swf
5. create flex project and insert the following code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
    [Embed(source="font.swf", symbol="font")]
    private var FontSourceClass:Class;
]]>
</mx:Script>
<mx:Text text="Abc Def" 
    fontFamily="Arial_12pt_st" fontSize="12" fontAntiAliasType="normal"/>
</mx:Application>

Notice the step when you add text field into MovieClip and linkage, than in Application you embed directly the symbol!

Lets assume you are working on a bigger project and all-code-in-one-palce is not fine solution. I would suggest to separate logic and style this way:

Application file (notice important import Fonts + var fonts:Fonts definition):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
<mx:Script>
<![CDATA[
    import Fonts;
    private var fonts:Fonts;
]]>
</mx:Script>
<mx:Style source="style.css" />
<mx:Text text="Abc Def"/>
</mx:Application>

Fonts.as working as embed font database:

package
{
    import flash.text.Font;
    
    public class Fonts extends Object
    {
        [Embed(source="fonts.swf", symbol="Arial_12pt_st")]
        public static const Arial_12pt_st:Class;
        
        [Embed(source="fonts.swf", symbol="Verdana_11pt_st")]
        public static const Verdana_11pt_st:Class;
        
        [Embed(source="fonts.swf", symbol="Verdana_12pt_st")]
        public static const Verdana_12pt_st:Class;
        
        [Embed(source="fonts.swf", symbol="Verdana")]
        public static const Verdana:Class;
        
        public function Fonts()
        {
            super();
        }
        
        public static function traceAll():void
        {
            var fontList:Array = Font.enumerateFonts(false);
            for(var i:uint = 0; i < fontList.length; i++)
                trace("font: " + fontList[i].fontName);
        }
    }
}

And style.css file should look like this:

Text
{
   fontFamily: "Verdana_11pt_st";
   fontSize: 11;
   fontAntialiasType: "normal";
}