Flex Examples

The following examples show how you can embed a font from a Flash SWF into a Flex application using @font-face in a <mx:Style /> block, or using the [Embed] metadata.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/25/embedding-fonts-from-a-flash-swf-file-into-a-flex-application/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        applicationComplete="init()">

    <mx:Script>
        <![CDATA[
            private function init():void {
                var appInfo:LoaderInfo = Application.application.loaderInfo;
                /* Just grab the filename from the SWF URL. */
                var fileName:String = (appInfo.url).split("/").pop();
                /* Convert bytes to kilobytes. */
                var kbTotal:String = (appInfo.bytesTotal / 1024).toFixed(2);
                info.text = fileName + " (" + kbTotal + "kb)";
            }
        ]]>
    </mx:Script>

    <mx:Style>
        @font-face{
            src: url('./fonts/fromFlash.swf');
            fontFamily: "Myriad Web Pro";
        }

        .myriadWebProFromSWF {
            fontFamily: "Myriad Web Pro";
            fontSize: 24;
        }
    </mx:Style>

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

    <mx:Text styleName="myriadWebProFromSWF">
        <mx:text>The quick brown fox jumped over the lazy dog.</mx:text>
    </mx:Text>

</mx:Application>

View source is enabled in the following example.

You can also embed the font SWF using the [Embed] metadata as shown below:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/25/embedding-fonts-from-a-flash-swf-file-into-a-flex-application/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        applicationComplete="init()">

    <mx:Script>
        <![CDATA[
            [Embed(source="./fonts/fromFlash.swf", fontName="Myriad Web Pro")]
            private var myriadWebProRegular:Class;

            private function init():void {
                var appInfo:LoaderInfo = Application.application.loaderInfo;
                /* Just grab the filename from the SWF URL. */
                var fileName:String = (appInfo.url).split("/").pop();
                /* Convert bytes to kilobytes. */
                var kbTotal:String = (appInfo.bytesTotal / 1024).toFixed(2);
                info.text = fileName + " (" + kbTotal + "kb)";
            }
        ]]>
    </mx:Script>

    <mx:Style>
        .myriadWebProFromSWF {
            fontFamily: "Myriad Web Pro";
            fontSize: 24;
        }
    </mx:Style>

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

    <mx:Text styleName="myriadWebProFromSWF">
        <mx:text>The quick brown fox jumped over the lazy dog.</mx:text>
    </mx:Text>

</mx:Application>

View source is enabled in the following example.

Loyal reader Chris asks: “what happens to bold characters in my text? I just can’t get linkButtons or htmltext to work with my embedded font, since flex doesn’t seem to find the bold typeface.” The answer is, embed more fonts! The previous examples only included a single font face, Myriad Web Pro, and the default font weight, normal. If you want to embed bold or italic, you’ll need two more @font-face sections in your <mx:Style /> block, one where you specify “fontWeight: bold;” and another where you specify “fontStyle: italic;”. Now, what if you want bold AND italic? Simple, embed more fonts! Just create another @font-face section (now you should have 4) that specifies the desired fontWeight and fontStyle value. And just because I’m terrible at explaining things, here’s the code for that. Also note if you right-click on the SWF below and select View Source, you can also take a look at my FLA file (built in Flash CS3). You’ll notice that I had to embed the same font four times, each time with the same settings as the values in the @font-face sections above (regular, bold, italic, bold+italic).

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/25/embedding-fonts-from-a-flash-swf-file-into-a-flex-application/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        applicationComplete="init()">

    <mx:Script>
        <![CDATA[
            private function init():void {
                var appInfo:LoaderInfo = Application.application.loaderInfo;
                /* Just grab the filename from the SWF URL. */
                var fileName:String = (appInfo.url).split("/").pop();
                /* Convert bytes to kilobytes. */
                var kbTotal:String = (appInfo.bytesTotal / 1024).toFixed(2);
                info.text = fileName + " (" + kbTotal + "kb)";
            }
        ]]>
    </mx:Script>

    <mx:Style>
        @font-face{
            src: url("fonts/fonts.swf");
            fontFamily: "Myriad Pro";
        }

        @font-face{
            src: url("fonts/fonts.swf");
            fontFamily: "Myriad Pro";
            fontWeight: bold;
        }

        @font-face{
            src: url("fonts/fonts.swf");
            fontFamily: "Myriad Pro";
            fontStyle: italic;
        }

        @font-face{
            src: url("fonts/fonts.swf");
            fontFamily: "Myriad Pro";
            fontWeight: bold;
            fontStyle: italic;
        }

        Label {
            fontFamily: "Myriad Pro";
            fontSize: 24;
        }
    </mx:Style>

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

    <mx:Text rotation="5">
        <mx:htmlText><![CDATA[The quick <b>brown</b> fox <i>jumped</i> over the <b><i>lazy</i></b> dog.]]></mx:htmlText>
    </mx:Text>

</mx:Application>

View source is enabled in the following example.