Flex Examples

The following example shows how you can use an embedded font with the ProgressBar control in Flex.

Full code after the jump.

There are two basic approaches to using an embedded font with a ProgressBar control. By default the progress bar’s label uses a bold font weight, so the first technique is to set the progress bar’s fontWeight style to “normal” using MXML or CSS, as shown in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/09/using-an-embedded-font-with-the-flex-progressbar-control/ -->
<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;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private function progressBar_initialize():void {
                progressBar.setProgress(76, 100);
            }
        ]]>
    </mx:Script>

    <mx:ProgressBar id="progressBar"
            mode="manual"
            labelPlacement="center"
            barColor="haloBlue"
            borderColor="black"
            color="black"
            fontFamily="EmbeddedBase02"
            fontSize="48"
            fontWeight="normal"
            trackColors="[black, black]"
            width="100%"
            height="100%"
            initialize="progressBar_initialize();" />

</mx:Application>

View source is enabled in the following example.

The second technique shows how you can embed the bold version of a font family in the <mx:Style /> block:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/09/using-an-embedded-font-with-the-flex-progressbar-control/ -->
<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 progressBar_initialize():void {
                progressBar.setProgress(76, 100);
            }
        ]]>
    </mx:Script>

    <mx:ProgressBar id="progressBar"
            mode="manual"
            labelPlacement="center"
            barColor="haloBlue"
            borderColor="black"
            color="black"
            fontFamily="EmbeddedBase02"
            fontSize="48"
            trackColors="[black, black]"
            width="100%"
            height="100%"
            initialize="progressBar_initialize();" />

</mx:Application>

View source is enabled in the following example.

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