8 Replies Latest reply on Mar 30, 2012 9:58 AM by Brandon Ellis

    Custom Font with a skinButton

    bolo.m

      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 ?

       

      BCapture d’écran 2012-02-09 à 17.12.58.png