Using an embedded font with the Flex ProgressBar control

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

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:

<?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 name="ProgressBar_fontWeight_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;
        }
    </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 www.stereo-type.net.