Using an embedded font with the ComboBox control in Flex

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

Full code after the jump.

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

View MXML

<?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 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 http://www.stereo-type.net/.

Tagged as: fontFamily, fontWeight