Search code examples
apache-flexairflex-spark

Spark embedding of fonts for Label


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:

Different tryes with embedding fonts

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.


Solution

  • 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.

    enter image description here

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