Tip: Embedding fonts in Flex

[bengarney]

When you are working with fonts, getting them to embed and work properly is a bit of a nightmare.

Step one is to embed them in a Flex CSS file like this:

Code: Select all

@font-face
{
   src:url("../Assets/HUM521XB.TTF");
   fontFamily: "Humanst Bold";
   advancedAntiAliasing: true;
   fontWeight: bold;
}


You can also embed a font symbol from a SWF file.

Step two is to list the fonts the SWF thinks it has in it:

Code: Select all

            // Debug aid - note all our fonts.
            var fontList:Array = Font.enumerateFonts(false);
            for (var i:uint=0; i<fontList.length; i++)
                Logger.Print(this, "Font: "+fontList[i].fontName + "   " + ObjectUtil.toString(fontList[i]));


Step three is to use it to style something:

Code: Select all

Button.MenuButton
{
   fontFamily: "Humanst Bold";
   fontSize: 30;
   advancedAntiAliasing: true;
   color: #FFFFFF;
   textSelectedColor: #FFFFFF;
   textRollOverColor: #FFFFFF;
}


[mas]

There is even a step 4 if one is working on a actionscript only project in Flex Builder.

Declare your embedded font in the variable declaration section of your main class

Code: Select all

   [Embed(source="C:\\WINDOWS\\Fonts\\TEMPSITC.TTF", fontFamily="Tempus Sans ITC")]
   private var _TEMPUS_str:String   


Don't forget to use the font as embedded , otherwise it will not be embedded into your SWF.

Code: Select all

  var myFormat:TextFormat = new TextFormat("Tempus Sans ITC", 18, 0x000000);
  var font : TextField = new TextField();
  font.defaultTextFormat = myFormat;
  font.embedFonts = true;


[phil]

There is even a step 4 if one is working on a actionscript only project in Flex Builder.

But don't forget to add '-fonts.managers manager class [...]' to your additional compiler options or transcoding can't occur.

Also, if you're using Ant you need to add the following inside the mxmlc task:

Code: Select all

<fonts>
    <manager class="flash.fonts.AFEFontManager"/>
</fonts>

Other font managers can be found here: http://livedocs.adobe.com/flex/3/html/help.html?content=fonts_06.html

[bengarney]

Whoa, great info, guys. I will definitely be referring to this in the future.