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.

22 Responses to Embedded Font Subsetting Using DefineFont4

  1. Jason says:

    Can you include the source for the font .swf? Your comments indicate that it’s in the .zip, but the only source in the .fla is for the World Languages .swf. 🙁

  2. Brian Thomas says:

    You’re right, my apologies! I have made it available for download here: http://blogs.adobe.com/tlf/WorldClassFontPack.as

  3. Marcin Glowacki says:

    Why do I get compile error when I set cff=true for my font? what might be wrong with my TTF file?Description Resource Path Location TypeUnable to transcode /../assets/fonts/dax/Dax-Italic.ttf. embeddedFonts.css Digest/assets/css line 40 Flex Problem

  4. Marcin Glowacki says:

    Description Resource Path Location Typetranscoding parameter ‘cff’ is not supported by ‘flex2.compiler.media.FontTranscoder’ DigestFontPackage.as Digest/src/com/typejack/digest line 5 Flex ProblemWhat is the workaround this compile error?

  5. Brian Thomas says:

    Hi Marcin,The cff=true flag is what specifies the embedded font as DefineFont4. This requires the use of Flex Gumbo.If you are trying to embed the font using Flex in Flash CS4, see this forum discussion on this topic.If you are getting these errors from Flex Builder, please be sure your project is correctly configured for Gumbo: using the beta gumbo sdk in flex builder 3.Brian

  6. Martin Heidegger says:

    I tried out with the new layout engine using gumbo sdk 4021 with normal AS3 Code embedding but as for now it was not yet possible for me to embed a font that actually works (even with cff=’true’). First of all: Many fonts i use have “custom styles” that are not “normal/italic/bold/bolditalic” but are named “Display” or “44 light italic” for many fonts it is just stopping with “plain weight and style was not found”. Once i found a font that actually compiles that font wasn’t used. FontDescription.isFontCompatible( “myFontName”, FontWeight.NORMAL, FontPosture.NORMAL ) returned for every one “false”. Even for fonts which were only available with a “normal” style. Maybe you have a idea what I might do wrong? PS.: My Windows is in German… perhaps that’s important.

  7. Hoyt Lindley says:

    Every time i run the WorldLanguages example I am getting an error: Error #1065: Variable WorldClassFontPack is not defined. I created a new flex project using Gumbo with the supplied source code and it compiles without errors. Is there another Flex step that I’m missing so that Flash can find the WorldClassFontPack class?

  8. Brian Thomas says:

    Hi Hoyt,Are you seeing this error in a version of the example that you compiled yourself in Flash CS4? Are you building the font pack yourself? The source for this was not included in the ZIP on Labs, but is available here: http://blogs.adobe.com/tlf/WorldClassFontPack.as– You should not need to perform any additional Flex steps, as the font SWF is included in the download package.

  9. I’m trying to create the subset font pack by myself. No success.I’m only use the Flex Builder to create Actionscript projects so I don’t know how exactly I can create one swf font embedded from flex builder without Flash.First at all, I have followed the instructions to install the Flex Gumbo SDK and I don’t have any problem, I could see the the arabic subset embedded example perfectly.From here is where I don’t know how can I use the WorldClassFontPack.as to generate an swf, If I can try to do this in Flash the ‘flex2.compiler.media.FontTranscoder’ error its showed.And If I can try to modified the arabic font flex example, load the generated swf and use it in Flash. I get the next error:ReferenceError: Error #1065: Variable WorldClassFontPack is not defined.at flash.system::ApplicationDomain/getDefinition()at Japanese/fontLoaded()(I used the same script from the WorldClassFontPack.fla)Then, at last, I can try to generate a swc file with the embedded font and import that file to Flash. But I couldn’t get my embedded font.Can you explain more in detail how could be created a swf file with an embedded subset?I’m very interested in use the TLF in my projects.Thanks in advance and sorry about my poor english.

  10. Hi!I’m trying to build my own font SWF to embed a japanese font.Following your explanation I’m used the next script in Eclipse, compliled with de Flex SDK 4:<?xml version="1.0" encoding="utf-8"?><FxApplication name="Subsetting Example" xmlns="http://ns.adobe.com/mxml/2009"><layout><HorizontalLayout/></layout><Script>&lt;![CDATA[[Embed(source="/Users/Daniel/FontExplorer X/Font Library/A/AXIS Std UL/AxisStd-UltraLight.otf", fontName=’_JapaneseFont’, unicodeRange=’U+3041-U+30F6′, cff=’true’)]public static var _JapaneseFont:Class;]]></Script></FxApplication>I’ve got a 580kb swf file. (If I try to put a <TextView> it works fine)But, If I try to load this file in Flash CS4:var loader:Loader = new Loader();loader.contentLoaderInfo.addEventListener(Event.COMPLETE, fontLoaded);var request:URLRequest = new URLRequest("FONTS.swf");loader.load(request);//function fontLoaded(e:Event):void{// do something}I get the next error:TypeError: Error #1009: null のオブジェクト参照のプロパティまたはメソッドにアクセスすることはできません。at mx.managers::FocusManager/activate()[E:\dev\i10\frameworks\projects\framework\src\mx\managers\FocusManager.as:694]at mx.managers::SystemManager/activateForm()[E:\dev\i10\frameworks\projects\framework\src\mx\managers\SystemManager.as:2393]at mx.managers::SystemManager/activate()[E:\dev\i10\frameworks\projects\framework\src\mx\managers\SystemManager.as:2351]at mx.components::FxApplication/initManagers()[E:\dev\i10\frameworks\projects\flex4\src\mx\components\FxApplication.as:742]at mx.components::FxApplication/initialize()[E:\dev\i10\frameworks\projects\flex4\src\mx\components\FxApplication.as:571]at FONTS/initialize()at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\i10\frameworks\projects\framework\src\mx\managers\SystemManager.as:2053]at mx.managers::SystemManager/initializeTopLevelWindow()[E:\dev\i10\frameworks\projects\framework\src\mx\managers\SystemManager.as:3327]at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::docFrameHandler()[E:\dev\i10\frameworks\projects\framework\src\mx\managers\SystemManager.as:3112]at mx.managers::SystemManager/docFrameListener()[E:\dev\i10\frameworks\projects\framework\src\mx\managers\SystemManager.as:2965]Can you explain how I can embed correctly a subset font in Flash?You can see the files here:embedSubset.zip

  11. Abhishek says:

    Note that starting Flex Gumbo build 7972, the ‘cff’ transcoding parameter has been renamed to ’embedAsCFF’.

  12. andré felipe says:

    “In build 7972, the ‘cff’ transcoding parameter was renamed to ’embedAsCFF’.”full discussion:http://forums.adobe.com/thread/36399

  13. Peder Jakobsen says:

    I didn’t read all the posts, so it may have been addressed, but in case it hasn’t:parameter cff=’true’ has been changed to embedAsCFF=’true’

  14. Peder Jakobsen says:

    This tag that you are using does not look familiar. Is this old Gumbo stuff, or your own class? Any way you could supply the source so I can check it out. Thanks

  15. Hi,I don’t manage to embed font in TLF.Here is my development environment :- Vista- Flex Builder 3- SDK 4 (all last build tested)- using TLF- using halo (mx:Application)I have an XML text file (Text Layout Format, not HTML) imported at runtime (TexTConverter.importToFlow).In this xml I set theses options :fontLookup=”embeddedCFF” renderingMode=”cff” fontFamily=”Tahoma”I embed the font by using an external CSS file :@font-face{src: url(“assets/font/tahomabd.ttf”);font-family: “Tahoma”;font-weight: bold;embedAsCFF: true;}@font-face{src: url(“assets/font/tahoma.ttf”);font-family: “Tahoma”;embedAsCFF: true;}mx|global {font-family: “Tahoma”;font-lookup: embedded-c-f-f;}Labels, TextInputs etc are using the embedded font but not the TLF, which display text in Times New Roman…Note 1 :I also tested to embed the font in AS :[Embed(source=’assets/font/tahoma.ttf’, embedAsCFF=’true’, fontName=’Tahoma’, mimeType=’application/x-font’)]private static var TahomaFont:Class;With or without “Font.registerFont(TahomaFont);” => don’t change anything.Note 2 :When I generate a SWF Font with CS4 (by using SDK3 then SDK4) and use it like that :@font-face{src: url(“assets/font/tahoma.swf”);font-family: “Tahoma”;embedAsCFF: true;}I have a compilation error : le paramètre de transcodage embedAsCFF n’est pas pris en charge par flex2.compiler.media.MovieTranscoderIf I dont set the option “embedAsCFF”, the font is embedded and works fine, except for TLF of course…Note 3 :If I don’t set the font fontLookup option in the XML text file, it works nice, the TLF use Tahoma but the font used is not the embedded Tahoma font (I have differents results onLinux and Vista, just for TLF texts).Note 4 :I am sure to compile with SDK 4, I even tried different SDK.Note 5 :I can’t turn my application into a Spark Application. The fact is that I have only seen TLF examples with a Spark Application, maybe it’s not possible to embed font in TLF with aHalo App ?Note 6 :I also tried to import TextFlow with a Configuration (for overriding options in the initial format, with CFF etc) : do nothing.Note 7 :Please help… I read Adobe TLF forum, many blog… and found nothing !!What’s wrong with this code ??ThanksYannick

  16. sam says:

    Hi Brian,I am trying to make an external FontPack.swf with cff (and embedAsCFF) attribute as you described in the article. I have tried both in Flash and Flex, but no success. I dont know whether it is the problem of new Gumbo build I am using. Could you please add a link to the exact Gumbo build you are used for this (hope it will be their in your archive 🙂 ).RegardsSam

  17. Alan Stearns says:

    Sam,Here’s an update of the code from the original blog post that works with the shipping version of Flex SDK 4 (4.0.0.14159)&lt ?xml version=”1.0″ encoding=”utf-8″? &gt&lt s:Application name=”Subsetting Example”xmlns=”http://ns.adobe.com/mxml/2009″xmlns:s=”library://ns.adobe.com/flex/spark” &gt&lt s:layout &gt&lt s:HorizontalLayout/ &gt&lt /s:layout &gt&lt Script &gt&lt ![CDATA[[Embed(source=’/Library/Fonts/AdobeArabic-Regular.otf’, embedAsCFF=’true’, fontFamily=’_AdobeArabicSubset’, unicodeRange=’U+0627,U+0644,U+0625,U+062E,U+0627,U+0621′)]private const AdobeArabicSubsetFont:Class;[Embed(source=’/Library/Fonts/AdobeArabic-Regular.otf’, embedAsCFF=’true’, fontFamily=’_AdobeArabicFull’)]private const AdobeArabicFullFont:Class;]] &gt&lt /Script &gt&lt s:TextArea id=”deviceFont” fontSize=”28″ fontLookup=”device” fontFamily=”Adobe Arabic” &gtDevice: الإخاء&lt /s:TextArea &gt&lt s:TextArea id=”subsetFont” fontSize=”28″ fontLookup=”embeddedCFF” fontFamily=”_AdobeArabicSubset” &gtSubset: الإخاء&lt /s:TextArea &gt&lt s:TextArea id=”fullFont” fontSize=”28″ fontLookup=”embeddedCFF” fontFamily=”_AdobeArabicFull” &gtFull: الإخاء&lt /s:TextArea &gt&lt /s:Application &gt

  18. Sridhar says:

    Hi,

    The word below is of TELUGU language and it is not appearing correctly in TLF. Please suggest.

    “బాక్స్‌ల్లో”

    • Alan Stearns says:

      I see the difference – it looks like we’re making one large incorrect cluster where there should be two. I’ll forward this on to the FTE folks. Thanks!

  19. JG says:

    what is the download address?

  20. Kanthan says:

    Will be WorldClassFontPack.as download link be fixed?