Spark item inside mx component won't render embedded font

Question

I have recently converted a Flex3 AIR project to Flex4, so it now uses Flex4.1 sdk and <s:WindowedApplication>. It is a large project and having painstakingly updated all the vital bits of code to work with Flex4 it now happliy compiles.

Most of the components in the project decend over quite a few generations from an mx based component, so I have not yet updated this to spark due to the workload. The problem I am having is that I cannot get the embedded font to work for spark components that I now add to my mx components.

For example, I have edited one of my (mx based) components and added some items to it. My embedded font has to have embedAsCFF=false so that it works for my mx components. So to get this to also embed for spark, I should be able to simply embed it again with embedAsCFF=true as shown below:

@font-face
{
    src: url("assets/fonts/MyriadWebPro.ttf");
    font-family: mainWithCFF;
    font-style: normal;
    font-weight: normal;
    font-anti-alias-type: "advanced";
    embedAsCFF: true;
}

s|Label{
    font-family: mainWithCFF;
}

I have tried a basic example of this that Adobe provides and this example works just fine, but in my complex project, it does not work. I do not get any errors, but instead of the spark component using MyriadWebPro it defaults to Times.

I wonder if this is because my component is mx based rather than spark based. Maybe this only works if you are using an mx component inside a spark component? If so does anyone know of a solution to the problem where you have an mx component and want to have a spark Label inside that?

Answer 1

If your component is MX (Halo), you want embedAsCFF to be false.

For Spark components, you embedAsCFF: true.

Also, I'm not sure your advanced Anti Aliasing is correct.

Spark Example:

@font-face
{
    font-family: "Myriad Web Pro";
    src: url("./assets/fonts/MyriadWebPro.ttf");
    font-weight: normal;
    embedAsCFF: true;  /* Spark */
    advancedAntiAliasing: true;
    unicodeRange: 
        U+0041-U+005A, /* Upper-Case [A..Z] */
        U+0061-U+007A, /* Lower-Case a-z */
        U+0030-U+003F, /* Numbers [0..9] */
        U+0020-U+002F, /* Space + Punctuation [ !"#$%&'()*+,-./ ] */
        U+003A-U+0040; /* Special Chars [ :;?@ ] */
}

MX Halo Example:

@font-face
{
    font-family: "Myriad Web Pro";
    src: url("./assets/fonts/MyriadWebPro.ttf");
    font-weight: normal;
    embedAsCFF: false;  /* Halo */
    advancedAntiAliasing: true;
    unicodeRange: 
        U+0041-U+005A, /* Upper-Case [A..Z] */
        U+0061-U+007A, /* Lower-Case a-z */
        U+0030-U+003F, /* Numbers [0..9] */
        U+0020-U+002F, /* Space + Punctuation [ !"#$%&'()*+,-./ ] */
        U+003A-U+0040; /* Special Chars [ :;?@ ] */
}