Custom Font with a skinButton

[Guest]

Hi,

I would like to use a custom font in a skin button in my Flex mobile porject ( 4.6)

My Skin button

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:s="library://ns.adobe.com/flex/spark">
  <!-- host component -->
  <fx:Metadata>
                    [HostComponent("spark.components.Button")]
  </fx:Metadata>
  <!-- states -->
  <s:states>
                    <s:State name="disabled" />
                    <s:State name="down" />
                    <s:State name="over" />
                    <s:State name="up" />
  </s:states>
  <s:Label id="labelDisplay" fontFamily="fashionista"
/>
</s:Skin>

My Main

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                 xmlns:s="library://ns.adobe.com/flex/spark"
                                 applicationDPI="160"
                               >
          <fx:Style source="Main.css"/>


  <s:VGroup>
                    <s:Label text="main menu" fontFamily="fashionista"/>
                    <s:Button skinClass="testSkin"  label="main menu"  />

  </s:VGroup>
  
</s:Application>

My Main.css

/* CSS file */
@namespace s library://ns.adobe.com/flex/spark;
global
{
  content-background-color: white;
}


@font-face {
  fontFamily:batcadf;
  src: url(/assets/fonts/batcadf.swf);
}

/*
@font-face
{
          fontFamily: BATCAFDGothic;
          src: url(/assets/fonts/batcadf.ttf);
          embedAsCFF: true;
}
*/


@font-face
{
          fontFamily: Helvetica;
  src: url(/assets/fonts/Helvetica.ttf);
  embedAsCFF: true;
}

@font-face
{
          fontFamily: HelveticaNeue LightCond;
  src: url(/assets/fonts/HelveticaNeueLightCond.ttf);
  embedAsCFF: true;
}

@font-face
{
          fontFamily: fashionista;
  src: url(/assets/fonts/fashionista.ttf);
  embedAsCFF: true;
}

I can see my custom font with the label but nothing with my button.

Could you help me ?

B

[Brandon_Ellis]

Hi,

you need to assign the fontfamily to a style class in your css file:

@font-face {

    src: url("src/Museo_Slab_9.otf");

    fontFamily: MuseoSlab700;

    fontStyle: normal;

    fontWeight: normal;

    advancedAntiAliasing: true;

    cff:true;

}

.customBtnFontStyles {

    fontFamily:MuseoSlab700;

    fontSize:30px;

}

and in your button skin class apply the style class to the label:

<s:Label id="labelDisplay" styleName="customBtnFontStyles"

and you should see something like this:

good luck!

[Guest]

Hi Brandon,

With a flex mobile projet, the code doesn't work.

Maybe i did something wrong .

Bolo

FXP : project http://minus.com/mYfcucHVw/1f

[Brandon_Ellis]

Both of these worked for me:

1. Just using a stylesheet with the button.

2. Using a a custom skin class for the button.

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView" xmlns:skins="skins.*">
  <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
  </fx:Declarations>
          <fx:Style source="styles.css" />
          <s:Button id="submitBtn" skinClass="skins.btnSkinClass"  top="40" label="using skin class" horizontalCenter="0"/>
          <s:Button id="submitBtn2" styleName="customFontStyles"  top="100" label="using stylesheet" horizontalCenter="0"/>
</s:View>

Just to test, you might want to try using a font local to your project instead of a swf.

b

[Guest]

In the last version, I didn't use a swf.

Could you please give me your Fxp ?

Which version of sdk did you use ? 4.6 ?

[Brandon_Ellis]

used 4.6.

http://dl.dropbox.com/u/2541209/MobileBtnFontTest.fxp

[Guest]

I did an other test with a win message. Same thing

[Brandon_Ellis]

That is strange. I'm using Flashbuilder Premium 4.6 for mac.

[Guest]

Hi again,

your code doesn't work for me. Very strange. Do you use Flash builder on Mac or Flash builder on Win ?

http://screencast.com/t/FVrm8iNz