Milos Zikic - Personal site, sharing thoughts about startups, products and engineering

Embed fonts in Flex but smartly!

Embeded fonts have so many advantages instead of using system ones. As Adobe stated already over this topic:

  • Client environment does not need the font to be installed.
  • Embedded fonts can be rotated and faded.
  • Embedded fonts are anti-aliased, which means that their edges are smoothed for easier readability. This is especially apparent when the text size is large.
  • Embedded fonts provide smoother playback when zooming.
  • Text appears exactly as you expect when you use embedded fonts.
  • When you embed a font, you can use the advanced anti-aliasing information that provides clear, high-quality text rendering in SWF files. Using advanced anti-aliasing greatly improves the readability of text, particularly when it is rendered at smaller font sizes.

But there are drawbacks as well:

  • Increased application size (longer download time)
  • Problems with combining halo and spark components (halo must use embed-as-cff: false)
  • Increased compile time (more hitting over the keyboard and shouting ccmooon cmooooon :D )

So there must be some way to have both of 2 worlds of embeded vs non-embeded fonts and enjoy the coolness of embeded fonts. And yes, there is. There are some optimizations available like embeding just the range of characters. 

Flex 4 SDK brought us  '''fontswf''' tool to pack your fonts as swf, which I find as a great way to manage application fonts.

fontswf has some good arguments to optimize what you get as an output at the end eg. enter character range to be exported.

Sample command line:
fontswf -u U+0041-U+005A,U+0061-U+007A,U+0030-U+0039,U+0020-U+002F,U+003A-U+0040,U+005B-U+0060,U+007B-U+007E  -a Arial -o arial arial.ttf

More about this tool and command line arguments:

And a bit about ranges (explanation what has been done above):
U 0041-U 005A, /* Upper-Case [A..Z] */
U 0061-U 007A, /* Lower-Case a-z */
U 0030-U 0039, /* Numbers [0..9] */
U 0020-U 002F, /* Punctuation */
U 003A-U 0040, /* Punctuation */
U 005B-U 0060, /* Punctuation */
U 007B-U 007E; /* Punctuation */

Share this post