Embedded Font Subsetting Using DefineFont4

The first tidbit of information I would like to share with you is how to use DefineFont4 to selectively embed glyphs from a font for use in Text Layout Framework, also knowing as font subsetting. While subsetting is not new to Flash via DefineFont3, it is limited to little more than embedding the outlines of glyphs. With DefineFont4, you are able to embed a complete portion of an OpenType font, including the tables (horizontal/vertical metrics, ligatures, kerning, GSUB, GPOS, etc…) that TLF has excellent support for. This is absolutely essential for fully supporting many complex scripts. Although currently you are required to use Flex Gumbo to get access to DefineFont4, I will show you how to use it no matter what type of Flash project you are working on by creating a font SWF. This is valuable knowledge for taking full advantage of TLF without burdening your users with the weight of embedding an entire font. It is especially important when including text from a font such as Adobe Song Std. Weighing in at a hefty 14.8MB it would be ridiculous to embed the entire font, but this should not stop you from taking advantage of all the new features in TLF.

DefineFont4 Embedded Font Subsetting in Flex Gumbo

First of all, you need to set up Flex Gumbo for use in your development environment. There are some instructions for doing so here: using the beta gumbo sdk in flex builder 3.

First, I’ll show you the code for embedding a full font with DefineFont4:

[Embed(source=’C:/WINDOWS/Fonts/AdobeArabic-Regular.otf’, cff=’true’, fontFamily=’_AdobeArabicFull’)]
private const AdobeArabicFullFont:Class;

Note the cff=’true’ attribute. This is necessary to specify DefineFont4. The fontFamily is a user-specified value that will be used later to refer to the embedded font.

The unicodeRange attribute is the key to subsetting. It accepts a comma separated list of Unicode values. There are two methods for specifying these values: individual (U+0627) and ranges (U+0625-U+0630). I recommend BabelPad for converting your text into Unicode for use in selecting the unicodeRange values.

[Embed(source=’C:/WINDOWS/Fonts/AdobeArabic-Regular.otf’, cff=’true’, fontFamily=’_AdobeArabicSubset’, unicodeRange=’U+0627,U+0644,U+0625,U+062E,U+0627,U+0621′)]
private const AdobeArabicSubsetFont:Class;

The following is the full code for my subsetting example. The TextView component is a Gumbo instance of Text Layout Framework. I have included three of them to demonstrate the difference in specifying device, subsetted, and fully embedded fonts. Note that the embedded fonts all include the fontLookup=”embeddedCFF” attribute and reference the fontFamily that was specified above to select the appropriate font.

<?xml version=”1.0″ encoding=”utf-8″?>
<FxApplication name=”Subsetting Example” xmlns=”http://ns.adobe.com/mxml/2009″>
<layout><HorizontalLayout/></layout>
<Script>
<![CDATA[
[Embed(source=’C:/WINDOWS/Fonts/AdobeArabic-Regular.otf’, cff=’true’, fontFamily=’_AdobeArabicSubset’, unicodeRange=’U+0627,U+0644,U+0625,U+062E,U+0627,U+0621′)]
private const AdobeArabicSubsetFont:Class;

[Embed(source=’C:/WINDOWS/Fonts/AdobeArabic-Regular.otf’, cff=’true’, fontFamily=’_AdobeArabicFull’)]
private const AdobeArabicFullFont:Class;
]]>
</Script>

<TextView id=”deviceFont” fontSize=”28″ fontLookup=”device” fontFamily=”AdobeArabic-Regular”>
Device: الإخاء
</TextView>
<TextView id=”subsetFont” fontSize=”28″ fontLookup=”embeddedCFF” fontFamily=”_AdobeArabicSubset”>
Subset: الإخاء
</TextView>
<TextView id=”fullFont” fontSize=”28″ fontLookup=”embeddedCFF” fontFamily=”_AdobeArabicFull”>
Full: الإخاء
</TextView>
</FxApplication>

Output from this SWF looks like this (image edited to fit on the page):
SubsetExampleOutput.png
Notice how the ‘Subset:’ text is using the Times New Roman as a fallback font. The necessary glyphs were not included due to the subset. The coolest part about this example is that the Arabic text is using ligatures to display itself properly, and you didn’t have to worry about that when choosing the values to embed!

Building a Font SWF for use in any Flash Application

This was an important technique used for the ‘World Language’ portion of the ‘World Class Text Tour’ on our labs page. While the application was being built in Flash CS4, it was necessary to use DefineFont4 subsetting in order to embed the glyphs used in all 10 of the language samples and show off all the features that enable all of those complex scripts to look fantastic. It’s extremely simple to build a Font SWF, in fact, just remove the TextView components from the example in the previous section and you have a Font SWF ready to be used in any Flash app.

Using a font SWF in a Flex/AIR application:There is already a great explanation of this over on Flex examples: embedding fonts from a flash swf file into a flex application.

Using a font SWF in a Flash Profession CS4 application:As I mentioned above, the ‘World Language’ portion of the ‘World Class Text Tour’ on our labs pages used DefineFont4 embedding for all of the languages. Their app is a great example of how to use a font SWF in a Flash CS4 app and we’ve made the source available for download: World Language Source Code. It makes use of the Font.registerFont call in order to make the embedded fonts available for use in TLF. The code for the font SWF is also included in that ZIP file. Edit: The source for the font SWF isn’t actually included with the World Language source. Download the source here. Please feel free to post in the comments if you’d like to see us do a more in depth explanation of how this is working.

Also – for general information about font embedding in Flash Professional CS4, check out page 6 in our Flash CS4 Component Overview.