embedded font won't work in Flex mobile ActionBar

Question

i\'ve got a few fonts embedded and am using them in my mobile application, and they are all working, except for the ones i try to use for the \"ActionBar\". They work everywhere

Answer 1

Here's a stylesheet that i use to style mobile apps (Action Bar, TextAreas, Buttons, and Labels.) It's compiled from blogs and forum posts.

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";

@font-face
{ 
    src: url("styles/acmesab.TTF"); 
    fontFamily: comicStrip; 
    embedAsCFF: false; 
}

@font-face
{ 
    src: url("styles/acmesab.TTF"); 
    fontFamily: comicStrip2; 
    embedAsCFF: true; 
}

s|ActionBar
{
    chromeColor: #EEEEEE;
    titleAlign: center;
    defaultButtonAppearance: beveled;
}

s|ActionBar #titleDisplay
{
    fontFamily: comicStrip;
    fontWeight: normal;
    color: #000000;
    textShadowColor: #FFFFFF;
}

s|ActionBar.beveled s|Group#actionGroup s|Button 
{
    fontFamily: comicStrip;
    fontWeight: normal;
    color: #000000;
    textShadowColor: #FFFFFF;
}

s|ActionBar.beveled s|Group#navigationGroup s|Button 
{
    fontFamily: comicStrip;
    fontWeight: normal;
    color: #000000;
    textShadowColor: #FFFFFF;
}

.textArea
{
    fontFamily: comicStrip;
    fontSize: 14;
    skinClass: ClassReference("spark.skins.mobile.TextAreaSkin");
}

.button
{
    fontFamily: comicStrip;
    fontSize: 14;
    fontWeight: normal;
    skinClass: ClassReference("spark.skins.mobile.ButtonSkin");
}

.label
{
    fontFamily: comicStrip2;
    fontSize: 14;
    fontWeight: normal;
}

Answer 2

I had the same problem for mx buton in flex4 what I did was mentioned font weight in both place as bold. Then it got working.

<fx:Style>

@font-face
        { 
            src: url("assets/fonts/Quasari1.ttf");
            fontFamily: msd;
            embedAsCFF: true; 
            fontWeight : bold;

        }
mx|Button{   
            fontFamily: msd;
            fontSize:22;
            color: red;
            fontWeight : bold;
            textFieldClass: ClassReference("mx.core.UIFTETextField"); 
        } 
</fx:Style>
<mx:Button label="submit" >

Answer 3

Here's an example of embedding fonts twice, once with embedAsCFF=false and again using embedAsCFF=true. View the full explanation at http://blogs.adobe.com/jasonsj/2011/08/embedding-fonts-in-flex-mobile-projects.html.

Edit 1: Fixed font file name

/* StyleableTextField, regular */
@font-face {
    src: url("assets/COMIC.TTF");
    fontFamily: "comic";
    embedAsCFF: false;
}

/* StyleableTextField, bold */
@font-face {
    src: url("assets/COMICBD.TTF");
    fontFamily: "comic";
    fontWeight: bold;
    embedAsCFF: false;
}

/* Label, regular */
@font-face {
    src: url("assets/COMIC.TTF");
    fontFamily: "comicCFF";
    embedAsCFF: true;
}

/* Label, bold */
@font-face {
    src: url("assets/COMICBD.TTF");
    fontFamily: "comicCFF";
    fontWeight: bold;
    embedAsCFF: true;
}

s|Label
{
    fontFamily: "comicCFF";
}

s|ActionBar
{
    fontFamily: "comic";
}

s|LabelItemRenderer
{
    fontFamily: "comic";
}

Answer 4

Try adding this to the ActionBar tag, to remove the bold styling:

creationComplete="event.currentTarget.titleDisplay.setStyle('fontWeight', 'normal')"

If that works, then you can try a better solution like extending the ActionBar class, or embedding the font in a bold style as well.

Answer 5

Embed a separate copy of the font with embedAsCFF: true; and apply that to the label in the skin and it will work. I can't remember the reasoning for it off hand (deadline=wtfever), but I know this solved this exact issue for me.

True story. =)

P.s. make sure the bold / italics are correct in the style as well.

Answer 6

I know that Button on Flex 3 had this issue, because its default font was bold, and many people did not think to embed the bold version of the font. Is it possible that the default action bar mobile skin uses bold/italic/something else and that you need to either make your own skin or embed both?

===========new stuff below==============

I don't have FB 4.5 installed on this machine yet, but I think you can right click in the package explorer and select New>Mobile As3 skin (or words to that effect). The dialog will ask you what component you want to select, and you should browse for action bar. I haven't done this (as I haven't needed mobile development yet), but it will probably create an as3 file with most of what you need to get started.

You'll probably find the code you need to edit in updateDisplayList and it will refer to titleDisplay.

HTH;

Amy