Flex/Flash Font Embedding

Question

I have a Flex 4 project that exists in a hybrid state of Flex/Flash AS3. I've declared a stylesheet in the base component of a Window:

<fx:Style source="styles/styles.css" />

And all of my Flex components can display this font. The stylesheet looks like this:

@font-face {
    src: url("../fonts/Whitney-Light-Pro.otf");
    fontFamily: WhitneyLight;
    advancedAntiAliasing: true;
}

...

.subBranding {
    fontFamily: WhitneyLight;
    fontSize: 20;
    color: #000000;
}

And Flex is able to display the specified font with the given styleName of subBranding. The problem comes in when I try to reference these fonts within a TextFormat object. I can refer to them by their proper font name ("Whitney Light") and it will show up as long as embedFonts is not set to true on the TextField that contains the text/font. This is likely because I actually have the font(s) installed. When I refer to them as WhitneyLight:

new TextFormat("WhitneyLight", 18, 0x000000);

I end up with Times or something to that effect with embedFonts = false and nothing with embedFonts = true because "WhitneyLight" doesn't exist according to TextFormat. I then enumerated over the fonts as far as the Font object is concerned:

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 + ".");
}

And the output I get is:

Fontarray length: 1
FONT 0:: name: WhitneyLight is embedded as type: embeddedCFF.

My understanding is that my font is embedded. What the heck?

Any ideas?

Aaron Aaron · Accepted Answer · 2010-09-12T05:33:21

In the stylesheet I need to embed a separate set of the font with the style "embedAsCFF: false;" set. When traced out, the font shows up as embedded as type "embedded" instead of "embeddedCFF" and functions in the TextFormat object. Though the exact answer wasn't there, I found the clue in some slides from a presentation Colin Moock debuted on Flash CS3/Flex Builder 3 interactivity where he used the [Embed] metatag to embed with embedAsCFF set to false. I guessed that there was a matching CSS style, and came out a winner.

So now I have WhitneyLight and WhitneyLightFlash, one for use with Spark/Halo Labels and another for TextFormat/TextField object pairings.

Flex/Flash Font Embedding

1 Answers