Spark embedding of fonts for Label

Question

I've always suffered with font embedding in Flash and Flex. I thought I understood how it worked with Spark but... I use Apache Flex 4.12 with AIR 13.0

My CSS:

@font-face {
    src: url("../../../lib/formata-light-1361538983.ttf");
    fontFamily: "Formata-Light";
    embedAsCFF:true;
}
@font-face {
    src: url("../../../lib/formata-light-1361538983.ttf");
    fontFamily: "Formata-Light-NoCFF";
    embedAsCFF:false;
}
@font-face {
    src: url("../../../lib/Formata-Regular.ttf");
    fontFamily: "Formata";
    embedAsCFF:true;
    fontWeight: normal;
}
@font-face {
    src: url("../../../lib/Formata-Regular.ttf");
    fontFamily: "Formata-NoCFF";
    embedAsCFF:false;
    fontWeight: normal;
}
@font-face {
    src: url("../../../lib/Formata-Bold.ttf");
    fontFamily: "Formata";
    embedAsCFF:true;
    fontWeight: bold;
}
@font-face {
    src: url("../../../lib/Formata-Bold.ttf");
    fontFamily: "Formata-NoCFF";
    embedAsCFF:false;
    fontWeight: bold;
}

My code:

<s:VGroup id="grp_debug">
    <s:Label fontFamily="Formata-Light" text="Label Formata-Light" fontWeight="normal" />
    <s:Label fontFamily="Formata-Light-NoCFF" text="Label Formata-Light-NoCFF" fontWeight="normal" />
    <s:Label fontFamily="Formata" text="Label Formata" fontWeight="normal" />
    <s:Label fontFamily="Formata-NoCFF" text="Label Formata-NoCFF" fontWeight="normal" />
    <s:Label fontFamily="Formata" text="Label Formata bold" fontWeight="bold" />
    <s:Label fontFamily="Formata-NoCFF" text="Label Formata-NoCFF bold" fontWeight="bold" />

    <s:RichText fontFamily="Formata-Light" text="RichText Formata-Light" fontWeight="normal" />
    <s:RichText fontFamily="Formata-Light-NoCFF" text="RichText Formata-Light-NoCFF" fontWeight="normal" />
    <s:RichText fontFamily="Formata" text="RichText Formata" fontWeight="normal" />
    <s:RichText fontFamily="Formata-NoCFF" text="RichText Formata-NoCFF" fontWeight="normal" />
    <s:RichText fontFamily="Formata" text="RichText Formata bold" fontWeight="bold" />
    <s:RichText fontFamily="Formata-NoCFF" text="RichText Formata-NoCFF bold" fontWeight="bold" />

    <s:Button fontFamily="Formata-Light" label="Button Formata-Light" fontWeight="normal" />
    <s:Button fontFamily="Formata-Light-NoCFF" label="Button Formata-Light-NoCFF" fontWeight="normal" />
    <s:Button fontFamily="Formata" label="Button Formata" fontWeight="normal" />
    <s:Button fontFamily="Formata-NoCFF" label="Button Formata-NoCFF" fontWeight="normal" />
    <s:Button fontFamily="Formata" label="Button Formata bold" fontWeight="bold" />
    <s:Button fontFamily="Formata-NoCFF" label="Button Formata-NoCFF bold" fontWeight="bold" />

</s:VGroup>

And what I get:

I thought Label would work with CFF fonts since it uses TLF engine. Anyway every configuration is tryed and nothing works with Label or RichText... And by the way, I don't get why Buttons work with both CFF and non-CFF fonts.

Answer 1

I found a solution but I'm not totally satisfied by it.

First, you have to make sure you checked Flex font manager when installing the Flex and AIR SDK.

The last version of Apache Flex seems to have a problem with embedding CFF fonts. Since the embedding worked fine with an older version (Flex 4.10 AIR 3.8), I copied the jars in /lib/external/optional.

afe.jar was the only one with a significant size change (1.37Mo -> 626Ko). It must be the one used (CFFFontManager is prioritary but doesn't work...) because now my fonts are displayed. There is an ugly padding though.

If someone finds a solution that allows to use the expected CFFFontManager, it'd be great.

Answer 2

Are you aware that in mobile projects you have to embed fonts twice? I've copied the text below:

There are just a few things you need to know about fonts in mobile:

• All mobile skins, LabelItemRenderer and IconItemRenderer use

• StyleableTextField (based on TextField) instead of the Flash Text Engine (FTE)

• The Spark Label component uses FTE StyleableTextField only supports embedded fonts with embedAsCFF=false
• You have to embed fonts twice, once with embedAsCFF=false and again as embedAsCFF=true, to use fonts in both types of text components
• Avoid using embedded fonts with editable text (TextInput and TextArea)