Flex Fonts and Font Loading

Flex has built-in support for TrueType (.ttf) fonts.

If you use Windows you can find many TrueType (.ttf) files in your C:\Windows\Fonts folder.

Runtime Font Loading

Runtime Loading is often the preferred method of loading Fonts in a Flex application.

CSS Font Definition

The following code uses font files from your projects assets folder to define the Arial font family.

/* CSS file */
@font-face {
   src:url("/assets/fonts/Arial/arial.ttf");
   fontFamily: Arial;
   advancedAntiAliasing: true;
}
@font-face {
   src:url("/assets/fonts/Arial/arialbd.ttf");
   fontFamily: Arial;
   fontWeight: bold;
   advancedAntiAliasing: true;
}
@font-face {
   src:url("/assets/fonts/Arial/ariali.ttf");
   fontFamily: Arial;
   fontStyle: italic;
   advancedAntiAliasing: true;
}
@font-face {
   src:url("/assets/fonts/Arial/arialbi.ttf");
   fontFamily: Arial;
   fontWeight: bold;
   fontStyle: italic;
   advancedAntiAliasing: true;
}

The font files defined in the CSS file will be loaded at runtime.

Compile Fonts to a SWF

You can also compile your CSS file into a SWF, then load the SWF at runtime.

Place the code into an Arial.css file (typically in your project's src/assets folder)
In Flex Builder, right-click on the Arial.css file and select Compile CSS to SWF
Dynamically load the SWF at runtime using the StyleManager (example code below)

Limiting Character Sets

It is possible to limit the characters available in a specific font using the unicodeRange CSS attribute. By limiting the character set you can significantly reduce the amount of data loaded for a font.

   @font-face {
   src:url("assets/Arial.ttf");
   fontFamily: Arial;
   flashType: true;
   unicodeRange:
      U 0041-U 005A, /* Upper-Case [A..Z] */
      U 0061-U 007A, /* Lower-Case a-z */
      U 0030-U 0039, /* Numbers [0..9] */
      U 002E-U 002E; /* Period [.] */
}

Embedding Fonts in a Flex Application

Fonts can be embedded in your application. The following code defines the Arial font family while embedding the referenced .ttf files in the Flex application.

   [Embed(source='assets/Arial.ttf', fontFamily='Arial', fontName='Arial', fontWeight="normal")] 
   public static var Arial:Class;
   
   [Embed(source='assets/Arial Bold.ttf', fontFamily='Arial', fontName='Arial', fontWeight="bold")] 
   public static var ArialBold:Class;
   
   [Embed(source='assets/Arial Italic.ttf', fontFamily='Arial', fontName='Arial', fontStyle='italic')] 
   public static var ArialItalic:Class;
   
   [Embed(source='assets/Arial Bold Italic.ttf', fontFamily='Arial', fontName='Arial', fontWeight="bold", fontStyle='italic')] 
   public static var ArialBoldItalic:Class;

The fonts defined above can then be registered via the Font class registerFont() function.

   import flash.text.Font;
   
   Font.registerFont( Arial );
   Font.registerFont( ArialBold );
   Font.registerFont( ArialItalic );
   Font.registerFont( ArialBoldItalic );

Downside of Embedding Fonts

One downside of embedding fonts in your application, rather than loading them at runtime, is that it will increase the size of your application's SWF file, sometimes significantly.

A single TTF file is often several hundred kilobytes, meaning a whole font family could add more than a few megabytes to your applications SWF size. For instance, Arial.ttf on a Windows machine is around 748 KB in size, the whole family is about 2.5 MB.

Font Class (flash.text.Font)

Fonts can be registered and enumerated in Flex using the flash.text.Fonts ActionScript class and its static functions.

   // define Arial font
   [Embed(source='assets/Arial.ttf', fontFamily='Arial', fontName='Arial', fontWeight="normal")] 
   
   // load the Arial font
   public function init():void
   {
      Font.registerFont( Arial );
   }

Enumerate the currently embedded and registered Fonts using the static enumerateFonts() function:

   // enumerate the embedded fonts
   var embeddedFonts:Array = Font.enumerateFonts();
   
   // enumerate all fonts (embedded and device)
   var allFonts:Array = Font.enumerateFonts( true );

Examples

Loading Font SWF with StyleManager

The following example shows how Flex can load Font definitions, compiled to a SWF, with the StyleManager.

   public function loadFont( fontUrl:String ):void
   {
      var loader:IEventDispatcher = StyleManager.loadStyleDeclarations( fontUrl );
      loader.addEventListener( StyleEvent.COMPLETE, onFontLoad );
      loader.addEventListener( StyleEvent.ERROR, onFontLoad );
      loader.addEventListener( StyleEvent.PROGRESS, onFontLoad );
   }
   
   protected function onFontLoad( styleEvent:StyleEvent ):void
   {
      if( styleEvent.type == StyleEvent.COMPLETE )
      {
         // SWF loading complete
      }
      else if( styleEvent.type == StyleEvent.PROGRESS )
      {
         // SWF loading in progress
      }
      else if( styleEvent.type == StyleEvent.ERROR )
      {
         // SWF loading error
      }
   }