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.

<?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 name="Embed_fonts_test"
        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:

<?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 name="Embed_fonts_test"
        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).

<?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 name="Embed_fonts_test"
        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.

20 thoughts on “Embedding fonts from a Flash SWF file into a Flex application

  1. 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. 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. 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. 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. 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. 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

  7. Hey Peter : :

    Can you please share your secret on HOW you get font files to appear in your library in your .fla file?! I gotta be missing something COMPLETELY obvious on this one… Thanks!

    : : Michael

  8. Can this technique be used to dynamically load a swf with fonts already embedded?

    For example, if I’m making a text editor or logo editor, I want to provide a set of fonts from which the user can pick. However, all of these fonts together balloon the size of the Flash file into the tens of megabytes—obviously too large for the ‘net.

    Could I allow the user to choose the font name from a drop down, then have the Flex application load an external swf or ttf or pfb, etc. with the font and be able to use it within the Flex application?

  9. Thanks! This made my day, my week and my year.

    I got stuck on a strange thing:
    In some examples from Adobe (and others) they specify the fontFamily without quotes like this
    fontFamily: MyFont;
    That will generate an error saying that style and weight cannot be found in the font ‘MyFont’.
    Actually the error is wrong and should say something else.
    You solve this by adding single or double quotes like this
    fontFamily: “MyFont”;

    Great site by the way. Keep up the good work

  10. Hey Peter,

    Taking your example fonts.fla and re-compiling with Flash CS4 gives the following errors in Flex the flex CSS:

    font ‘Myriad Pro’ with bold weight and italic style not found
    font ‘Myriad Pro’ with bold weight and regular style not found
    font ‘Myriad Pro’ with normal weight and italic style not found

    Is there something else that needs to be done using CS4? What’s changed?

  11. Same issues here. Annoying!

    font ‘HelveticaNeueLT Com 75 Bd’ with normal weight and regular style not found
    Unable to transcode /CS4Background.swf.

    If I figure it out in the next hour or so, I’ll post how I solved it.

  12. As far as I can tell, CS4 doesn’t like some fonts whereas CS3 had no problem with them. For example, Helvetica Neue works for me, but HelveticaNeueLT Com 75 Bd no longer works. It seems the issue is because Helvetica Neue Com 75 Bd is OpenType. It is .ttf however, and it worked fine with CS3 Flash.

  13. Posted this same question on another of Peter’s examples…

    What do I do when I need, say, 8 font families for simple RichTextEditor capabilities. I now need to embed 32 @font-faces to make this work, and those 32 fonts then grind the compiler to a halt whenever I need to build my application. I’ve tried SWF, css, inline, etc. and nothing seems to improve the performance of the compiler because of the need for the “default” fonts to be re-embedded (especially if I want to do something like rotate the RTE).

    Has anyone else had problems with embedding multiple fonts?

    1. @lordB8r,

      I can only imagine embedding 32 font faces would create an enormous SWF that would take a long time to load anyways. You may want to reconsider embedding that many fonts.

      Out of curiosity, if the compiler ever finishes compiling, how large is that SWF?

      Peter

  14. Hi,

    I don’t manage to embed font in a SWF with the option “embedAsCFF”.
    This show me a compilation error (flex2.compiler.media.MovieTranscoder).

    See my other comment for more details.

    Any idea ?

    Thanks

    1. @Yannick Lacaute,
      I haven’t tried TLF w/ Flash CS4, but I wouldn’t expect that to work very well since CS4 doesn’t really support CFF font embedding or the newer DefineFont4 font stuff. You’d probably have to wait for Flash CS5 or do this all in Flash Builder.

      As for your other comment, I’ll try and take a look later today when I get into the office and have a few minutes.

      Thanks,
      Peter

  15. hi Peter
    My seach for HTMLText with embedded font finally ends at this page. Wonderful examples.
    Thanks
    jai

  16. Hi Peter
    Could you explain how to generate one swf file that inclues multiple font faces? Like the one in your example fonts/fonts.swf. It seems that the fontswf utility accepts one input font file.
    Thanks!

  17. Hi Peter, I am using fonts from swf. But it applying for mx Components not for Spark . How to recover from this.
    Please give me a solution…

  18. Hi Peter, I am also using loading fonts from swf. But it applying for mx Components not for Spark . Please let me know the workaround for this.

Comments are closed.