CODEWITHSUNDEEP
apache-flexmobileflex4.5flexbuilder
Sambruce Sam
Sambruce Sam

Reputation: 401

Flex 4.5 embedding font not working for tabbars and list items

I am trying to embed a custom font to all elements of my mobile app.
Only the Action Bar and Buttons are changed meanwhile the Tabbars and ListItems doesn't change.

Here's my style.css code 

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

/* StyleableTextField, regular */
@font-face {
    src: url("assets/fonts/Roboto-Light.ttf");
    fontFamily: "robotoLight";
    fontWeight: bold;
    embedAsCFF: false;
}

/* Label, regular */
@font-face {
    src: url("assets/fonts/Roboto-Light.ttf");
    fontFamily: "robotoLightCFF";
    fontWeight: normal;
    embedAsCFF: true;
}

s|Label {fontFamily: "robotoLightCFF";}
s|ActionBar {fontFamily: "robotoLight";}
s|LabelItemRenderer {fontFamily: "robotoLight";}
s|Button {fontFamily: "robotoLight";}
s|TabbedViewNavigator #tabBar {fontFamily: "robotoLight";}
s|TextInput {fontFamily: "robotoLight";}
s|View {fontFamily: "robotoLight";}

global
{
    text-align: left;
    content-background-color: #FFFFFF;
    content-background-alpha: 0.59;
    fontFamily: "robotoLight";
}

/** this is the bar the top of the app **/
s|ActionBar{
    chromeColor:#4D99E0; /* more like background color */
    titleAlign:center; 
    textShadowAlpha: 0;
}

/* This is the styling of the tabbed navigator */
s|TabbedViewNavigator #tabBar { 
    chromeColor: #4D99E0; /* color of background on buttons */
    color: #ffffff; /* color of text on tab names */
}

.playButton,.pauseButton,.resumeButton,.initButton {
    chromeColor: #4D99E0;
    color: #fff;
}

And here's a screenshot of how it appears: screenshot http://samzkingdom.com/wp-content/uploads/2014/01/Capture.png

How do I do this? Or what am I doing wrong?

[EDIT]

It is totally my mistake that I just tested on the emulator on my Desktop. It works perfectly on the Android device.

Upvotes: 0

Views: 367

Answers (2)

Alexander Farber
Alexander Farber

Reputation: 22988

For StyleableTextField (used in many UI elements in mobile Flex, for example in ListItemRenderer) you should use embedAsCFF: false; as explained in Adobe's blog Embedding Fonts in Flex Mobile Projects

For example the following works for me (for the Lists):

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

s|ActionBar {
    chromeColor: #0066CC;
    color: #FFFFFF;
    titleAlign: center;
    /* textShadowAlpha: 0; */
    textShadowColor: #000000;
}

@font-face { 
    src: url("/assets/fonts/arial.ttf"); 
    fontFamily: embFont;
    embedAsCFF: false; /* required for StyleableTextField */
    unicodeRange:
        U+0020-U+0040, /* Punctuation, Numbers */
        U+2660-U+2666, /* Card suits */
        U+0041-U+005A, /* Upper-Case A-Z */
        U+0061-U+007A, /* Lower-Case a-z */
        U+0410-U+0451; /* Cyrillic */   
}

s|LabelItemRenderer {
    fontFamily: embFont;
}

Upvotes: 1

UI Dev
UI Dev

Reputation: 699

Try this for tab navigator. Just replace the font family okay..

.tabNavigator
{
font-family: "Helvetica Neue";
font-weight:normal;
horizontal-gap:1; 
tab-style-name:"myTabs";
corner-radius:0;
selected-tab-text-style-name: "myselectedTabs";
border-color:#D6D6D6;
}

.myTabs
{
font-size:13;
font-family: "Helvetica Neue";
font-weight:normal;
fill-colors:"#e5e5e5","#f6f6f6";
fill-alphas:1,1; 
color:#000000;
corner-radius:0;
text-selected-color:#000000;
text-roll-over-color:#000000;
border-color:#D6D6D6;
 }

.myselectedTabs
{
font-size:13;
font-family: "Helvetica Neue";
font-weight:normal;
fill-colors:"#FFFFFF","#FFFFFF";
fill-alphas:1,1;
color:#0d7dbd;
corner-radius:0;
text-selected-color:#0d7dbd;
text-roll-over-color:#0d7dbd;
}

Upvotes: 3

Related Questions