The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/24/using-embedded-fonts-with-the-mx-advanceddatagrid-control-in-flex-4/ -->
<s:Application name="MX_AdvancedDataGrid_fontFamily_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        @font-face {
            src: url("C:/Windows/Fonts/comic.ttf");
            fontFamily: myEmbeddedFont;
            fontWeight: normal;
            embedAsCFF: false;
        }
 
        mx|AdvancedDataGrid {
            fontFamily: myEmbeddedFont;
        }
    </fx:Style>
 
    <mx:AdvancedDataGrid id="adg"
            horizontalCenter="0" verticalCenter="0">
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="@label" />
            <mx:AdvancedDataGridColumn dataField="@data" />
        </mx:columns>
        <mx:dataProvider>
            <s:XMLListCollection id="dp">
                <s:source>
                    <fx:XMLList>
                        <product label="Product 1" data="3" />
                        <product label="Product 2" data="1" />
                        <product label="Product 3" data="4" />
                        <product label="Product 4" data="1" />
                        <product label="Product 5" data="5" />
                        <product label="Product 6" data="9" />
                    </fx:XMLList>
                </s:source>
            </s:XMLListCollection>
        </mx:dataProvider>
    </mx:AdvancedDataGrid>
 
</s:Application>

View source is enabled in the following example.

If you want to use a CFF/DefineFont4 font, you can set the embedAsCFF style to true and enable Flash Text Engine in MX components by selecting Project > Properties from the main menu and then selecting the “Use Flash Text Engine in MX components” option in the Flex Compiler category.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/24/using-embedded-fonts-with-the-mx-advanceddatagrid-control-in-flex-4/ -->
<s:Application name="MX_AdvancedDataGrid_fontFamily_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        @font-face {
            src: url("C:/Windows/Fonts/comic.ttf");
            fontFamily: myEmbeddedFont;
            fontWeight: normal;
            embedAsCFF: true;
        }
 
        mx|AdvancedDataGrid {
            fontFamily: myEmbeddedFont;
        }
    </fx:Style>
 
    <mx:AdvancedDataGrid id="adg"
            horizontalCenter="0" verticalCenter="0">
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="@label" />
            <mx:AdvancedDataGridColumn dataField="@data" />
        </mx:columns>
        <mx:dataProvider>
            <s:XMLListCollection id="dp">
                <s:source>
                    <fx:XMLList>
                        <product label="Product 1" data="3" />
                        <product label="Product 2" data="1" />
                        <product label="Product 3" data="4" />
                        <product label="Product 4" data="1" />
                        <product label="Product 5" data="5" />
                        <product label="Product 6" data="9" />
                    </fx:XMLList>
                </s:source>
            </s:XMLListCollection>
        </mx:dataProvider>
    </mx:AdvancedDataGrid>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/31/displaying-different-fonts-in-a-dropdown-menu-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:ArrayCollection id="arrColl"
            source="{Font.enumerateFonts(true)}">
        <mx:sort>
            <mx:Sort>
                <mx:fields>
                    <mx:SortField name="fontName" />
                </mx:fields>
            </mx:Sort>
        </mx:sort>
    </mx:ArrayCollection>

    <mx:ComboBox id="comboBox"
            dataProvider="{arrColl}"
            labelField="fontName"
            fontSize="14"
            open="comboBox.dropdown.variableRowHeight = true;">
        <mx:itemRenderer>
            <mx:Component>
                <mx:Label fontFamily="{data.fontName}"
                        toolTip="{data.fontName}" />
            </mx:Component>
        </mx:itemRenderer>
    </mx:ComboBox>

</mx:Application>

View source is enabled in the following example.

For an example of doing this in the Flex 4 SDK, see “Displaying different fonts in a Spark List control in Flex 4″.

 

Full code after the jump.

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

    <mx:Style>
        @font-face {
            src: local("Comic Sans MS");
            fontFamily: EmbeddedComicSansMS;
            fontWeight: normal;
        }

        @font-face {
            src: local("Comic Sans MS");
            fontFamily: EmbeddedComicSansMS;
            fontWeight: bold;
        }

        ComboBox {
            fontFamily: EmbeddedComicSansMS;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}" />

</mx:Application>

If you want to set the font separately on the ComboBox control’s dropdown menu, you can set the ComboBox control’s dropdownStyleName style, as seen in the following example:

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

    <mx:Style>
        @font-face {
            src: local("Comic Sans MS");
            fontFamily: EmbeddedComicSansMS;
            fontWeight: normal;
        }

        @font-face {
            src: local("Comic Sans MS");
            fontFamily: EmbeddedComicSansMS;
            fontWeight: bold;
        }

        ComboBox {
            dropdownStyleName: comboBoxDropdownStyles;
        }

        .comboBoxDropdownStyles {
            fontFamily: EmbeddedComicSansMS;
            fontWeight: normal;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}" />

</mx:Application>

For an example of using different fonts in a ComboBox control’s dropdown menu, see “Displaying different fonts in a dropdown menu on a ComboBox control in Flex”.

For another example of using embedded fonts with the ComboBox control, see “Using an embedded font with the ComboBox control in Flex”. Sigh.

 

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/15/using-an-embedded-font-with-the-colorpicker-control-in-flex/ -->
<mx:Application name="ColorPicker_fontFamily_test"
        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:Script>
        <![CDATA[
            private function uintToHex(value:uint):String {
                var prefix:String = "000000";
                var str:String = String(prefix + value.toString(16));
                return "#" + str.substr(-6).toUpperCase();
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:ColorPicker id="colorPicker"
                fontFamily="Base02Embedded"
                editable="false" />
        <mx:Label id="lbl"
                text="{uintToHex(colorPicker.selectedColor)}"
                fontFamily="_typewriter"
                fontSize="16" />
    </mx:ApplicationControlBar>
 
</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 example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/15/using-an-embedded-font-with-the-colorpicker-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;
        }
 
        ColorPicker {
            fontFamily: Base02Embedded;
        }
    </mx:Style>
 
    <mx:Script>
        <![CDATA[
            private function uintToHex(value:uint):String {
                var prefix:String = "000000";
                var str:String = String(prefix + value.toString(16));
                return "#" + str.substr(-6).toUpperCase();
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:ColorPicker id="colorPicker"
                editable="false" />
        <mx:Label id="lbl"
                text="{uintToHex(colorPicker.selectedColor)}"
                fontFamily="_typewriter"
                fontSize="16" />
    </mx:ApplicationControlBar>
 
</mx:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/15/using-an-embedded-font-with-the-colorpicker-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">
 
    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
        }
    </mx:Style>
 
    <mx:Script>
        <![CDATA[
            private function init():void {
                colorPicker.setStyle("fontFamily", "Base02Embedded");
            }
 
            private function uintToHex(value:uint):String {
                var prefix:String = "000000";
                var str:String = String(prefix + value.toString(16));
                return "#" + str.substr(-6).toUpperCase();
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:ColorPicker id="colorPicker"
                editable="false"
                initialize="init();" />
        <mx:Label id="lbl"
                text="{uintToHex(colorPicker.selectedColor)}"
                fontFamily="_typewriter"
                fontSize="16" />
    </mx:ApplicationControlBar>
 
</mx:Application>

Base 02 font by www.stereo-type.net.

 

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/07/using-an-embedded-font-with-the-tabbar-control-in-flex/ -->
<mx:Application name="TabBar_fontFamily_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

    <mx:VBox id="vBox"
            verticalGap="0"
            width="320"
            height="200">
        <mx:TabBar id="tabBar"
                dataProvider="{viewStack}"
                fontFamily="EmbeddedBase02"
                width="100%" />
        <mx:ViewStack id="viewStack"
                width="100%"
                height="100%"
                backgroundColor="white">
            <mx:VBox label="One">
                <mx:Label text="one..." />
            </mx:VBox>
            <mx:VBox label="Two">
                <mx:Label text="two..." />
            </mx:VBox>
            <mx:VBox label="Three">
                <mx:Label text="three..." />
            </mx:VBox>
            <mx:VBox label="Four">
                <mx:Label text="four..." />
            </mx:VBox>
            <mx:VBox label="Five">
                <mx:Label text="five..." />
            </mx:VBox>
        </mx:ViewStack>
    </mx:VBox>

</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 example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/07/using-an-embedded-font-with-the-tabbar-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: EmbeddedBase02;
            fontWeight: bold;
        }

        TabBar {
            fontFamily: EmbeddedBase02;
        }
    </mx:Style>

    <mx:VBox id="vBox"
            verticalGap="0"
            width="320"
            height="200">
        <mx:TabBar id="tabBar"
                dataProvider="{viewStack}"
                width="100%" />
        <mx:ViewStack id="viewStack"
                width="100%"
                height="100%"
                backgroundColor="white">
            <mx:VBox label="One">
                <mx:Label text="one..." />
            </mx:VBox>
            <mx:VBox label="Two">
                <mx:Label text="two..." />
            </mx:VBox>
            <mx:VBox label="Three">
                <mx:Label text="three..." />
            </mx:VBox>
            <mx:VBox label="Four">
                <mx:Label text="four..." />
            </mx:VBox>
            <mx:VBox label="Five">
                <mx:Label text="five..." />
            </mx:VBox>
        </mx:ViewStack>
    </mx:VBox>

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/07/using-an-embedded-font-with-the-tabbar-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: EmbeddedBase02;
            fontWeight: bold;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private function init():void {
                tabBar.setStyle("fontFamily", "EmbeddedBase02");
            }
        ]]>
    </mx:Script>

    <mx:VBox id="vBox"
            verticalGap="0"
            width="320"
            height="200">
        <mx:TabBar id="tabBar"
                dataProvider="{viewStack}"
                width="100%"
                initialize="init();" />
        <mx:ViewStack id="viewStack"
                width="100%"
                height="100%"
                backgroundColor="white">
            <mx:VBox label="One">
                <mx:Label text="one..." />
            </mx:VBox>
            <mx:VBox label="Two">
                <mx:Label text="two..." />
            </mx:VBox>
            <mx:VBox label="Three">
                <mx:Label text="three..." />
            </mx:VBox>
            <mx:VBox label="Four">
                <mx:Label text="four..." />
            </mx:VBox>
            <mx:VBox label="Five">
                <mx:Label text="five..." />
            </mx:VBox>
        </mx:ViewStack>
    </mx:VBox>

</mx:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

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

    <comps:MyComp />

</mx:Application>

comps/MyComp.as

package comps {
    import mx.containers.VBox;
    import mx.containers.ViewStack;
    import mx.controls.Label;
    import mx.controls.TabBar;
    import mx.core.Container;

    public class MyComp extends VBox {
        [Embed(systemFont="Base 02",
                fontName="EmbeddedBase02",
                fontWeight="bold",
                advancedAntiAliasing="true",
                mimeType="application/x-font")]
        private var EmbeddedBase02:Class;

        public var tabBar:TabBar;
        public var viewStack:ViewStack;
        public var child1:Container;
        public var child2:Container;
        public var child3:Container;
        public var child4:Container;
        public var child5:Container;

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

        private function init():void {
            setStyle("verticalGap", 0);
            width = 320;
            height = 240;

            var label1:Label;
            var label2:Label;
            var label3:Label;
            var label4:Label;
            var label5:Label;

            label1 = new Label();
            label1.text =  "one...";

            label2 = new Label();
            label2.text =  "two...";

            label3 = new Label();
            label3.text =  "three...";

            label4 = new Label();
            label4.text =  "four...";

            label5 = new Label();
            label5.text =  "five...";

            child1 = new VBox();
            child1.label = "One";
            child1.addChild(label1);

            child2 = new VBox();
            child2.label = "Two";
            child2.addChild(label2);

            child3 = new VBox();
            child3.label = "Three";
            child3.addChild(label3);

            child4 = new VBox();
            child4.label = "Four";
            child4.addChild(label4);

            child5 = new VBox();
            child5.label = "Five";
            child5.addChild(label5);

            viewStack = new ViewStack();
            viewStack.percentWidth = 100;
            viewStack.percentHeight = 100;
            viewStack.setStyle("backgroundColor", "white");
            viewStack.addChild(child1);
            viewStack.addChild(child2);
            viewStack.addChild(child3);
            viewStack.addChild(child4);
            viewStack.addChild(child5);
            addChild(viewStack);

            tabBar = new TabBar();
            tabBar.dataProvider = viewStack;
            tabBar.percentWidth = 100;
            tabBar.setStyle("fontFamily", "EmbeddedBase02");
            addChildAt(tabBar, 0)
        }
    }
}

And finally, if you wanted to use a normal font weight instead of the default bold font weight, you could use the following snippet:

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

    TabBar {
        fontFamily: EmbeddedBase02;
        tabStyleName: normalTabStyleName;
        selectedTabTextStyleName: normalTabStyleName;
    }

    .normalTabStyleName {
        fontWeight: normal;
    }
</mx:Style>

Base 02 font by www.stereo-type.net.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/04/using-an-embedded-font-with-the-slider-controls-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: EmbeddedBase02;
        }

        .sliderLabelStyleName {
            fontFamily: EmbeddedBase02;
        }
    </mx:Style>

    <mx:HSlider id="slider"
            minimum="0"
            maximum="20"
            value="0"
            labels="[0,5,10,15,20]"
            snapInterval="1"
            tickInterval="1"
            liveDragging="true"
            labelStyleName="sliderLabelStyleName"
            width="200" />

</mx:Application>

View source is enabled in the following example.

You can also set the labelStyleName and fontFamily styles using an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/04/using-an-embedded-font-with-the-slider-controls-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: EmbeddedBase02;
        }

        Slider {
            labelStyleName: sliderLabelStyleName;
        }

        .sliderLabelStyleName {
            fontFamily: EmbeddedBase02;
        }
    </mx:Style>

    <mx:HSlider id="slider"
            minimum="0"
            maximum="20"
            value="0"
            labels="[0,5,10,15,20]"
            snapInterval="1"
            tickInterval="1"
            liveDragging="true"
            width="200" />

</mx:Application>

Or, you can also set the labelStyleName and fontFamily styles using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/04/using-an-embedded-font-with-the-slider-controls-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.HSlider;

            [Embed(systemFont="Base 02",
                    fontName="EmbeddedBase02",
                    advancedAntiAliasing="true",
                    mimeType="application/x-font")]
            private var EmbeddedBase02:Class;

            private var slider:HSlider;

            private function init():void {
                var labelStyleName:CSSStyleDeclaration = new CSSStyleDeclaration();
                labelStyleName.setStyle("fontFamily", "EmbeddedBase02");

                StyleManager.setStyleDeclaration(".sliderLabelStyleName", labelStyleName, true);

                slider = new HSlider();
                slider.minimum = 0;
                slider.maximum = 20;
                slider.value = 0;
                slider.labels = [0, 5, 10, 15, 20];
                slider.snapInterval = 1;
                slider.tickInterval = 1;
                slider.setStyle("labelStyleName", "sliderLabelStyleName");
                slider.width = 200;
                addChild(slider);
            }
        ]]>
    </mx:Script>

</mx:Application>

Base 02 font by www.stereo-type.net.

 

By default the ComboBox control’s label use a bold font weight, whereas the dropdown items use a normal font weight.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/02/using-an-embedded-font-with-the-combobox-control-in-flex/ -->
<mx:Application name="ComboBox_fontFamily_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">
 
    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: EmbeddedBase02;
            fontWeight: bold;
        }
 
        @font-face {
            src: local("Base 02");
            fontFamily: EmbeddedBase02;
        }
    </mx:Style>
 
    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
    </mx:Array>
 
    <mx:ComboBox id="comboBox"
            dataProvider="{arr}"
            fontFamily="EmbeddedBase02" />
 
</mx:Application>

View source is enabled in the following example.

Base 02 font by www.stereo-type.net.

 

Full code after the jump.

<?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 name="NumericStepper_fontFamily_test"
        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 www.stereo-type.net.