Embedding fonts by name instead of location

The following example shows how you can embed a font in Flex by specifying the font name instead of a location by using the local() function instead of the src() function when embedding a font.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/09/embedding-fonts-by-name-instead-of-location/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        applicationComplete="init();">

    <mx:Style>
        @font-face {
            src:local("Arial");
            fontFamily: ArialEmbedded;
        }

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

    <mx:Script>
        <![CDATA[
            private var bTotal:Number;

            private function init():void {
                bTotal = Application.application.loaderInfo.bytesTotal;
                /* Convert from bytes to kilobytes. */
                lbl.text = (bTotal / 1024).toFixed(2) + " KB";
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Label id="lbl" />
    </mx:ApplicationControlBar>

    <mx:ProgressBar id="progressBar"
            label="Loading Flex Application"
            labelPlacement="center"
            fontFamily="ArialEmbedded"
            rotation="15"
            indeterminate="true"
            themeColor="haloSilver" />

</mx:Application>

View source is enabled in the following example.

For more information on embedding fonts in Flex, see “Locating embedded fonts” in the Flex documentation.

One thought on “Embedding fonts by name instead of location

  1. Very Well, use this:

    @font-face {
        src:local("Arial");
        fontFamily: ArialEmbedded;
        fontWeight: bold;
    }

    Is the compiled swf binding the Arial font or not?

Comments are closed.