Flex 4 embedding fonts for Spark components

Question

I'm having a problem embedding fonts with the Open Source Flex 4.5 SDK (Hero), although am having the same issues with Flex 4 Open Source SDK. I've added some ttf files to the assets directory of my project structure and am trying to access the fonts in my CSS file as follows:

@font-face { 
src: url("../assets/DroidSans.ttf"); 
fontFamily: DroidSans;
embedAsCFF: true; 
}

This particular font is required to be used for a number of spark controls throughout the project (this is why embedAsCFF is set to true though I believe this parameter is optional anyway). However none of the spark components display this font when it's set in their fontFamily property. I get this error on compiling for every spark component I attempt to set the font on:

warning: incompatible embedded font 'DroidSans' specified for (controlName) . This component requires that the embedded font be declared with embedAsCff=true.

Strangely enough the above font works with mx components even though embedAsCFF is set to true (from what I've looked up on this subject this should be set to false for mx components and true for spark).

The above code also works in Flash Builder, however, this project needs to be developed using the Open Source SDK, where it fails.

Any ideas? Surely someone else has had the same problem?

When running the following script, it shows that the fonts are "embedded", however, just not as "CFFEmbedded". The adobe documentation says these need to say "CFFEmbedded"

var fontArray:Array = Font.enumerateFonts(false); 
trace("Fontarray length: " + fontArray.length); 
for(var j:int = 0; j < fontArray.length; j++) { 
    var thisFont:Font = fontArray[j]; 
    trace("FONT " + j + ":: name: " + thisFont.fontName + " embedded as type:" + thisFont.fontType + "."); 
} 

Thanks

Bob

[EDIT]

OK - I have finally managed to embed the font. I have tried SWC's from CS4, SWC's from Flash Builder 4, SWF's from both CS4 and Flash Builder....

Eventual fix

1) Package the font into a SWF in Flash Builder 4 2) Reference the compiled SWF using the following CSS

    @font-face {
        cff: false;
        src: url('../bin/DroidSansFont.swf');
        fontFamily: DroidSansMX;
    }

    @font-face {
        cff: true;
        src: url('../bin/DroidSansFont.swf');
        fontFamily: DroidSans;

    }

The crazy thing is - the use of the "cff: true" directive. All the documentation says to use "embedAsCFF". This throws an error, while using the "cff" attribute - it seems to work.

I have no idea - can anyone chime in with some ideas?

Answer 1

Probably you are using older SDK and compiler, "cff" was renamed to "embedAsCFF" in latest SDK builds, starting from build Flex SDK 4.0.7972 build, see this discussion http://forums.adobe.com/thread/36399 for the comment from Flex SDK engineer that proves that