Flex Examples

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