Embedding fonts in a Flex application using Embed metadata

The following example shows how you can embed a font using ActionScript and the [Embed] metadata.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/07/embedding-fonts-in-a-flex-application-using-embed-metadata/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        applicationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.utils.ObjectUtil;

            [Embed(source="assets/Base 02.ttf",
                    fontName="EmbeddedBase02",
                    mimeType="application/x-font")]
            private var EmbeddedBase02:Class;

            private function init():void {
                var c:Font = new EmbeddedBase02();
                ta.text = ObjectUtil.toString(c);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Label id="lbl"
                text="The quick brown fox jumped over the lazy dog."
                fontFamily="EmbeddedBase02"
                fontSize="18" />
    </mx:ApplicationControlBar>

    <mx:TextArea id="ta"
            editable="false"
            width="100%"
            height="100%" />

</mx:Application>

If you need to specify a custom unicode range (see “Specifying custom named unicode ranges in Flex” for more details), you can use the following snippet:

[Embed(source="assets/Base 02.ttf",
        fontName="EmbeddedBase02",
        mimeType="application/x-font",
        unicodeRange="englishRange")]
private var EmbeddedBase02:Class;

You can also embed system fonts by name, instead of by location, by specifying the systemFont parameter instead of the source parameter, as seen in the following snippet:

[Embed(systemFont="Tahoma",
        fontName="EmbeddedTahomaItalic",
        fontStyle="italic",
        advancedAntiAliasing="true",
        mimeType="application/x-font")]
private var EmbeddedTahomaItalic:Class;

Tagged as: fontFamily, fontName, mimeType