Font embed issues with Flex 4.11, Spark, and AS3

Question

Ok, I am having issues with successfully embedding and using my font for an app I'm developing.

I'm using Flash Builder 4.7, Flex 4.11, AIR 4.0, and AS3 to develop the app, primarily leaning on AS3, as it's normally my strength.

I'm expecting to see the fonts displayed, but instead it displays them in a typical serif font, not the font I'm loading, and not the default sans serif. I also sometimes receive a warning about embedAsCFF needing to be true. This is already set to true, as you can see in the code excerpts below, and the warning is inconsistent, but the error is consistent.

Here is where I'm embedding the fonts, inside my App's mxml file:

[Embed(source="fonts/Interstate-LightItalic.ttf",
 fontFamily="LogoLight",
 fontName="LogoLight",
 fontStyle="italic",
 mimeType="application/x-font",
 embedAsCFF="true")]
var LogoLightFont:Class;

[Embed(source="fonts/Interstate-BlackItalic.ttf",
 fontFamily="LogoBlack",
 fontName="LogoBlack",
 fontStyle="italic",
 mimeType="application/x-font",
 embedAsCFF="true")]
var LogoBlackFont:Class;

In my class, I am then creating two Spark labels (import spark.components.Label;) and inside the updateDisplayList I am setting their styles, as follows:

Inside the constructor:

this._appLabel = new Label();
this._subLabel = new Label();

Then the override of the updateDisplayList:

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
    super.updateDisplayList(unscaledWidth, unscaledHeight);

    //style text fields
    this._appLabel.setStyle('fontFamily', EmbeddedImages.logoBlack);
    this._appLabel.setStyle('fontStyle', 'italic');
    this._appLabel.setStyle('fontSize', 72);
    this._appLabel.setStyle('color', 0xFFFFFF);

    this._subLabel.setStyle('fontFamily', 'LogoLight');
    this._subLabel.setStyle('fontSize', 28);
    this._subLabel.setStyle('color', 0xFFFFFF);
...
}

I've left out the placement and the rest of the updateDisplayList, as well as the rest of the app, but I am hoping I've provided enough that someone can help. I looked through Stack Overflow as well as Googling and while I found many suggestions, found nothing that would work for my situation. Most of the solutions focused on TextField elements, however these are Spark Labels.

I have programmed most of the app with Spark Labels where applicable and will be embedding more fonts, so I would prefer to stay with them.

Patrick Patrick · Accepted Answer · 2014-03-25T02:20:37

You might try just setting the label object's style class. The below inside my css file works for me in both sans-serif and serif. Running through the TextAreaSkin sets it to it's serif typeface.

@font-face { 
    src: url("../assets/fonts/MyriadPro-Regular.otf");
    fontFamily: "myriad";
    embedAsCFF: true; 
}
// sans-serif
.font24Style {
    fontFamily: "myriad";
    fontSize: 24;
}
// serif
.font14Style {
    fontFamily: "myraid";
    fontSize: 14;
    skinClass: ClassReference("spark.skins.mobile.TextAreaSkin");
}

the View's code...

...
<s:Label id="toName"
 styleName="font24Style"
alpha=".5"
width="20%"/>
<s:Label id="toAddress"
 styleName="font14Style"
alpha=".5"
width="40%"/>

Font embed issues with Flex 4.11, Spark, and AS3

1 Answers