25
Oct
07

Embedding fonts from a Flash SWF file into a Flex application

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.


6 Responses to “Embedding fonts from a Flash SWF file into a Flex application”


  1. 1 Chris Oct 26th, 2007 at 4:03 am

    HI Peter,

    runs great, but I still have a problem with it: 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. And the embeddes font doesn’t appear in my rte fontlist.
    Do you have an idea what to do?
    cheers,
    Chris

  2. 2 peterd Oct 26th, 2007 at 7:14 am

    Chris,

    The trick is to have a couple more fonts in your Flash library (one regular, one bold, one italic, one bold italic). Export the SWF and then make similar tweaks to your MXML/CSS, embed the regular, bold, italic, bold italic.

    The code was a bit too much for a comment, but scroll up a bit and you can see the updated example/explanation above.

    Hope that helps,

    Peter

  3. 3 Frederik Heyninck Nov 23rd, 2007 at 8:22 am

    Hi Peter,

    When I use this exampe with my font David Transparant I aways get this error in Fex Builder 3:

    Severity and Description Path Resource Location Creation Time Id
    font ‘David Transparant’ with normal weight and regular style not found mens_op_maat_v0.1/src styles.css line 133 1195834836308 1027

    Any idea?

  4. 4 Janet Mar 10th, 2008 at 4:32 am

    That’s a very useful piece of information and code, thanks Peter. So far it’s working fine for me but if I have any trouble I’ll be sure to ask haha.

  5. 5 Davidyn May 4th, 2008 at 12:07 am

    Thanks. I use your examples alot and I hope you will figure this one out too:

    when embedding ‘Myriad Pro’ - I cannot see special characters like copyright sign. is there another embeding feather that Im missing?

  6. 6 peterd May 4th, 2008 at 1:19 am

    Davidyn,

    I haven’t played around too much with fonts embedded from Flash specifically, but if you’re embedding your font within Flex you need to make sure you’re embedding the correct unicode values. For an example, see Specifying custom named unicode ranges in Flex.

    If you are using a Flash based font, I’d start by checking that you are in fact embedding that specific copyright character/glyph.

    Peter

Leave a Reply