« Silverlight 3 Beta Release and AdobeFlex Builder is Free to Students »
Mar 16

Flex 3/4 Font Embedding: CFF-DefineFont4 vs DefineFont3

Flash, Flex Add comments

There are now two types of font embedding available to both Flash (CS4) and Flex 3 and 4. These are DefineFont3 (classic), and DefineFont4 (supporting CFF and the new text engine.)

In Flash, Flex 2 and 3 you’d traditionally embed fonts for use in the TextField class, whether that’s a vanilla TextField, or a component that uses the TextField class and has been set to use embedded fonts. This is DefineFont3 embedding. The steps are usually:

  1. Embed fonts in a SWF using the Flash IDE or the [Embed()] tag in Flex.
  2. Set myTextField.embedFonts = true; (or setStyle("embedFonts",true) for a component.)
  3. Either set myTextField.defaultTextFormat, use setTextFormat(), or setStyle().
  4. Set the text with .text or .htmlText (using CSS or the font tag).

Follow up:

With the new flash.text.engine.* package (available as part of the Text Layout Framework for Flex 3 or as standard in Flex 4), we have another way to do text that’s a lot more powerful than the old TextField. But it’s no direct replacement just yet (there are performance reasons), and at least for now you’ll probably be using them alongside eachother, particularly if your Flex project is using the Halo (Flex 3) components.

In my case I’m using the Text Layout Framework for advanced stuff, and inside custom controls I’m using the plain old TextField to give me good performance.

The Problem

When you embed a font for the new text engine (and TLF), you need to specify the font to be embedded using CFF (part of the DefineFont4 embedding engine). Usually I embed each font 4 times when I do this, for regular, bold, italic and bold italic variations. The problem is the CFF embedded font is not available to TextFields.

If you run through the Fonts listed in Fonts.enumerateFonts(), you’ll see your Font there, but the .fontType property shows it is CFF. With Flex 4, CFF is set to true by default. Here’s an example of how to specify DefineFont3 embedding using Flex 4:

Code:

[Embed(source='ttf/arial.ttf', fontFamily='Arial', unicodeRange='U+2022,U+25A0,U+25C6,    U+0030-U+0039,   U+002E', cff="false")]
public static var Arial:Class;

Conclusion

This is really just something to be aware of, there’s no much you can do (as far as I’m aware), apart from either embedding the fonts using both CFF and not using CFF, leading to huge SWFs. Or you stick to using non-embedded fonts when using plain TextFields and the TLF everywhere else.

There has been some discussion on this at Adobe and this includes suggestions on how to deal with this transition. It seems the plan is to develop a new TextField class that uses Vellum (the Text Layout Framework).

UPDATE:

See this document on how to handle DF3 and DF4 (CFF) embedding with the Halo and Spark components.


16 comments

  1. § Richard Leggett® Email said on : 16/03/09 @ 16:21
    I should point out that if not-embedding your fonts (so that you can use the TLF) seems a pain you can use the blendMode = BlendMode.LAYER to prevent your non-embedded TextFields from disappearing when you mask them.
  2. § Rory MacDonald Email said on : 23/03/09 @ 16:39
    Hey Richard -

    Have you any experience embedding different cuts of fonts, such as bold, italic and so on, using DF4? At the moment, im in a huge world of pain, having to embed some as TrueType and others as OpenType because the compiler seemingly ignores "italic" on TrueType but picks it up with OpenType!

    Nasty stuff!

    R
  3. § Richard Leggett® Email said on : 23/03/09 @ 16:42
    Hi Rory,

    Yes I've been embedding the various weights and styles using DefineFont4. In the Embed meta-tag I've just been using the fontWeight='bold' or fontStyle='italic' options and I've had no problems so far.

    At what point are you finding it fail and how are you testing? (I tended to use a small hand coded portion of TLF XML).
  4. § Rory MacDonald Email said on : 24/03/09 @ 17:42
    Hey Richard,

    It was failing at compile time, saying it couldn't find the correct font name, weight, style etc. I ended up having to strip all the meta data out of the font using Font Lab, then exported new fonts as TTF's, with the style name as part of the font name. Managed to get it working this way.

    I could compile Arial and other system fonts fine, it just threw these errors when i tried to compile a font called Plantin, which had been working fine with DF3 embedding.

    Was compiling using FDT/MXMLC through ANT.

    R

  5. § Richard Leggett® Email said on : 24/03/09 @ 17:48
    Oh wow, good to know, thanks for the extra info.
  6. § Rory MacDonald Email said on : 24/03/09 @ 20:50
    Richard -

    Out of interest, which version of the SDK are you compiling with?

    Cheers,

    R
  7. § Richard Leggett® Email said on : 24/03/09 @ 21:05
    I'm using 4.0.0.4932 but I'm still using the November release of the TLF (will upgrade to the nightlies soon but I'm avoiding the API changes for the moment).
  8. § Rory MacDonald Email said on : 24/03/09 @ 21:33
    Cool - Thanks Richard.
  9. § Matthias Dehmel Email said on : 21/07/09 @ 11:30
    "It seems the plan is to develop a new TextField class that uses Vellum (the Text Layout Framework)."

    I think the problem with this will be the performance mentioned before. I ran a couple of really simple tests with the different possibilities to create text, and came to some serious results. The goal was to create 1000 multiline textfields:

    TextField: 187ms
    FlashTextEngine: 944ms
    TextLayoutFramework: 2823ms

    Either my implementation was really bad (don't think so) oder the actual TLF is more than 14 times as slow as the good old TextField, and the FTE implementation was still about 5 times slower.

    I know that the power that comes with FTE is hillarious and something we ever strived for (no more "no go!" to the designers out there), and it would be fine if you could use TextField and the FTE both, but as you have to choose for one embedding method I have some serious issues about switching to FTE right now...

    Matthias
  10. § Matthias Dehmel Email said on : 21/07/09 @ 11:38
    Actually, in the test mentioned above I used TextFilter.PLAIN_TEXT_FORMAT for the TextLayoutFormat import.
    If importing withTextFilter.TEXT_LAYOUT_FORMAT, it took me 3166ms, which is over 16 times slower than TextField...
  11. § Richard Leggett® Email said on : 21/07/09 @ 13:34
    Hi Matthias, that's very interesting indeed. Of course the TLFTextField replacement has already made it into the Flex 4 SDK (on labs), but the performance question is interesting, perhaps something to bring up with the TLF team via their blog to see if there are optimisations planned? Thanks for your comment.
  12. § Matthias Dehmel Email said on : 21/07/09 @ 15:01
    Okay I must admit I did my tests with the actual download of the TLF, not the one incorporated in the Gumbo release.

    I furthermore noticed a mistake in the normal TextField test which affected the performance extremely, because embedFonts had to be set to false (which actually takes more time for the Flash Player)

    The new test results are as following:

    TLFTextField: 77ms
    TextField: 571ms
    FlashTextEngine: 962ms
    TextLayoutFramework RAW: 2285ms
    TextLayoutFramework XML: 2436ms

    So there are slight improvements in the TLF and the TextField is more slowly as its now looking for device fonts. So the FTE is actually only taking the double time of the TextField, which is acceptable for me.

    The results of the TLFTextField would be really astonishing if it would have the same functionality as the original TextField:

    "Due to schedule constraints, for Flex 4.0, TLFTextField will only be usable in limited situations (no htmlText, no scrolling, no selection, no editing)"
    as written here http://forums.adobe.com/thread/453194, so I think it's nice performance leads back to these missing features.

    Matthias
  13. § Wesley Email said on : 25/09/09 @ 12:34
    FYI... in build 7972 cff is renamed to embedAsCFF. I suspect this is how it will be known for the future use.
  14. § Victor Email said on : 06/11/09 @ 15:40
    Just started playing with the flash.text.format classes, since the ContentElement approach is great for content mixing images and text (which is just what I needed).

    However, I also want to adjust my font's sharpness and thickness, as was possible using non-CFF fonts using TextField.fontSharpness and TextField.fontThickness.

    From my research so far, it appears that - right now - it is impossible to manually set sharpness and thickness value for CFF-embedded fonts?

    I read somewhere in the Flex documentation that CFF fonts have the "advanced anti aliasing" information built-in, so does this mean it will be possible in the future then?

    I'd really love to be able to use flash.text.format AND set sharpness / thickness.

    Any thoughts?
  15. § Mark Email said on : 06/01/10 @ 11:49
    Tried this on beta2 flex4. Comes back with a error message:
    transcoding parameter 'cff' is not supported by 'flex2.compiler.media.FontTranscoder'
  16. § Richard Leggett® Email said on : 06/01/10 @ 11:53
    Hi Mark,

    I believe it has since changed to embedAsCFF in Flex , or it may be on by default I forget. Here's more info:

    http://blog.flexexamples.com/2009/06/14/using-a-cff-embedded-font-with-a-halo-label-control-in-flex-4/

    http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS2db454920e96a9e51e63e3d11c0bf69084-7f5f.html

Comments are closed for this post.

Contact. ©2010 by Richard Leggett. multiple blogs / web hosting.
Design & icons by N.Design Studio. Skin by Tender Feelings / EvoFactory.
Entries RSS Comments RSS Log in