Using embedded fonts with the NumericStepper control in Flex

The following example shows how you can use an embedded font with the Flex NumericStepper control by setting the fontFamily style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/18/using-embedded-fonts-with-the-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
        }
    </mx:Style>

    <mx:NumericStepper id="numericStepper"
            fontFamily="Base02Embedded"
            fontSize="32"
            width="100"
            textAlign="right" />

</mx:Application>

View source is enabled in the following example.

You can also set the fontFamily style in an external .CSS file or <mx:Style /> block, as seen in the following snippet:

<mx:Style>
    @font-face {
        src: local("Base 02");
        fontFamily: Base02Embedded;
    }

    NumericStepper {
        fontFamily: Base02Embedded;
        fontSize: 32;
        textAlign: right;
    }
</mx:Style>

Or, you can set the fontFamily style using ActionScript, as seen in the following snippet:

numericStepper.setStyle("fontFamily", "Base02Embedded");
numericStepper.setStyle("fontSize", 32);
numericStepper.setStyle("textAlign", "right");

Due to popular demand, here is the “same” example, written in ActionScript:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/18/using-embedded-fonts-with-the-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <comps:MyComp id="myComp" />

</mx:Application>

comps/MyComp.as

/**
 * http://blog.flexexamples.com/2008/05/18/using-embedded-fonts-with-the-numericstepper-control-in-flex/
 */
package comps {
    import mx.containers.Canvas;
    import mx.controls.NumericStepper;

    public class MyComp extends Canvas {

        [Embed(systemFont="Base 02",
                fontName="Base02Embedded",
                mimeType="application/x-font")]
        public var Base02Embedded:Class;
        public var numericStepper:NumericStepper;

        public function MyComp() {
            super();
            init();
        }

        private function init():void {
            numericStepper = new NumericStepper();
            numericStepper.width = 100;
            numericStepper.setStyle("fontFamily", "Base02Embedded");
            numericStepper.setStyle("fontSize", 32);
            numericStepper.setStyle("textAlign", "right");
            addChild(numericStepper);
        }
    }
}

View source is enabled in the following example.

Base 02 font by http://www.stereo-type.net/.

Tagged as: fontFamily