Embedded font will not work in Flex mobile ActionBar

Question

I have several built-in fonts and I use them in my mobile application, and they all work, except for the ones that I'm trying to use for an "ActionBar". They work everywhere, and substituting "Comic Sans MS" for "titleCGF" changes it to Comic Sans. So why won't it work with my custom font Family?

  <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> 

here is what i get:

EDIT: I tried to create 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 appears for spark.core.IDisplayText. those. <s:IDisplayText .../> does nothing ...

Answer 1

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

Edit 1: Font file name fixed

 /* 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 2

I had the same problem for mx buton in flex4, which I did, the so-called font in both places is shown in bold. Then he worked.

 <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

I know that Button on Flex 3 had this problem because the default font was highlighted in bold and many people did not think to embed a bold version of the font. Is it possible that the action action mobile skin uses bold / italics / something else by default, and you need to either create your own skin or insert both?

=========== new material below ===============

I don’t have FB 4.5 yet, but I think that you can right-click in the package explorer and choose Create> Mobile As3 Skin (or words about it). In the dialog box, you will be asked which component you want to select, and you should view the action bar. I haven't done it yet (since I don't need mobile development yet), but it will probably create an as3 file with most of what you need to get started.

You will probably find the code that needs to be changed in updateDisplayList and it will refer to titleDisplay.

NTN;

Amy

Answer 4

Insert a separate copy of the font with embedAsCFF: true; and apply this to the label on the skin and it will work. I can’t remember the arguments in favor of it (deadline = wtfever), but I know that this solved this problem for me.

The real story. =)

Ps make sure the bold / italic style is correct.

Answer 5

Try adding this to your ActionBar tag to remove the bold style:

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

If this works, you can try a better solution, for example, expand the ActionBar class or paste the font in bold style.

Answer 6

Here is the stylesheet that I use for mobile app styles (Action Bar, TextAreas, Buttons and Labels.) It is made up of 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; }