A character in Sim Hei Font

Since I posted External Fonts in Flash, Flash CS3 came out and I started coding in ActionScript 3. Font sharing has changed in some subtle, frustrating ways with this new version. Fonts just don’t embed in libraries in Flash CS3.

Fortunately I was able to find several solid posts that describe a solution that works. I will add several nuances that come from my particular situation and vantage point. The examples covered reuse in order to ensure that a specific font would be displayed, but did not cover localization issues.

The best post I found, on allflashwebsite, walks through installing and configuring the free Flex SDK and FlashDevelop ActionScript editor to create a font swf. Fonts in Flash CS3 The Good Way includes sample code to create and test the font swf as well.

Another excellent post on troyworks provides links to very useful tools for designating character ranges and identifying Unicode character codes. It also lists additional posts used to research the font swf technique, font conversions.

Tip: Font Embed Test

Set the rotation of the field – this only works with embedded fonts and is very obvious.

Embedded for sure

Embedded for sure

Once I successfully created a font swf, I used the sample code to verify that it was loaded and available to other swfs at runtime. Then I retooled some of the sample code to verify that the specific font and character range that I wanted to use would work: Sim Hei font in the Simplified Chinese character range.

XML Encoding

The XML containing the Chinese text wouldn’t load until I changed the encoding from UTF-8 to GB2312.

Font Naming

Importance of Font Naming

To do this I substituted the values for Sim Hei in place of the fonts in the example font embed Actionscript. I designated the character range to the CJK Unified Ideographs: unicodeRange=’U+4E00-U+9FBB’. To find this information I consulted a Unicode Guide provided by jrfraphix.

Set ActionScript Panel Font to Sim Hei

Set ActionScript Panel Font to Sim Hei

ActionScript Panel font with a Chinese text displayed

I changed the display font in the Flash ActionScript editor to Sim Hei and pasted in some Chinese text from the XML in place of the sample text provided for the Font Tester swf. This ensured that it displayed the correct characters instead of squares, and would visually match the text in the swf.

A note on Unicode fonts:

The best font to match with Arial is MS Hei or Sim Hei. Hei loosely translates to “bold.” There are better (smaller file size)  Double-byte fonts for web use that can be purchased as well. I find Arial Unicode to be an all-around poor choice: the Latin characters don’t look and space  like standard Arial, the font file is huge, and double-byte characters are too light.

Post to Twitter