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

Answer 2

I had a pretty similar issue, however I was unable to load any compiled SWF font file (Flex SDK 4.1). Finally, I was able to solve this issue using this code:

MXML:

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";
    @font-face {
        src: url("fonts/files/HelveticaNeueLTPro-Md.otf");
        font-family: HelveticaNeueLTPro-Md;
        embed-as-cff: true;
    }

    @font-face {
        src: url("fonts/files/HelveticaNeueLTPro-Bd.otf");
        font-family: HelveticaNeueLTPro-Bd;
        embed-as-cff: true;
    }

    .helvetica {
        font-family: HelveticaNeueLTPro-Md;
        font-lookup: embeddedCFF;
    }
    .helveticaBold {
        font-family: HelveticaNeueLTPro-Bd;
        font-lookup: embeddedCFF;
    }
</fx:Style>

As you see this is for the HelveticaNeue font (regular and bold) in OpenType format, but I had success with TrueType as well. The important CSS attribute was "font-lookup: embeddedCFF". Once I didn't set this, compiling worked but the embedded font was never displayed. Same goes for loading SWFs created by fontswf utility - never worked for me, too.

Answer 3

The problem described is probably caused by using a default set of font managers. You need to use CFFFontManager. Typically You define all four possible managers to allow some fallback. This is typically a problem of MX application trying to use spark components.

see also:http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7e09.html

and possibly: https://docs.sonatype.org/display/FLEXMOJOS/Using+Adobe+Font+Manager+to+embed+fonts

Configuration for Flexmojos follows (you can use similar for flex-config.xml files, viz link above):

<fonts> 
  <managers> 
    <manager-class>flash.fonts.JREFontManager</manager-class> 
    <manager-class>flash.fonts.BatikFontManager</manager-class> 
    <manager-class>flash.fonts.AFEFontManager</manager-class> 
    <manager-class>flash.fonts.CFFFontManager</manager-class> 
  </managers> 
</fonts> 

Notice the preferred manager is at the bottom.