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 else, and substituting "Comic Sans MS" for "titleCGF" changes it to Comic Sans. So why won't it work with my custom fontFamily?

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @font-face {
            src: url("assets/Comic_Book.ttf");
            fontFamily: comic;
            embedAsCFF: false;
        }
/******************************
        @font-face{
            src: url("assets/CGF_Locust_Resistance.ttf");
            fontFamily: titleCGF;
            embedAsCFF: false;
        }
        @font-face{
            src: url("assets/CGF_Locust_Resistance.ttf");
            fontFamily: titleCGF;
            embedAsCFF: true;
        }
**********************************/
        .titleStyle{
            fontFamily: titleCGF;
            color: #FFFFFF;
        }
        .comicMessage{
            fontFamily: titleCGF;
            color: #838689;
            fontSize: 14;
        }
        s|IconItemRenderer{
            fontFamily: comic;
            color: #FEBA03;
            fontSize:18;
        }
        s|ActionBar{
            defaultButtonAppearance: beveled;
            accentColor: #FEBA03;
        }
        s|ActionBar #titleDisplay{
            fontFamily: "titleCGF";

        }
    </fx:Style>

this is what i get:

EDIT: i tried to make my own skin, and part of the pre-written code is this:

<!-- SkinParts
name=titleGroup, type=spark.components.Group, required=false
name=actionGroup, type=spark.components.Group, required=false
name=navigationGroup, type=spark.components.Group, required=false
name=titleDisplay, type=spark.core.IDisplayText, required=false
-->

when i try to define something like the first three, <s:Group .../>, it works fine. But nothing shows up for spark.core.IDisplayText. ie, <s:IDisplayText .../> yeilds nothing...

Answer 1

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";
}