Embedding fonts from a Flash SWF file into a Flex application

by Peter deHaan on October 25, 2007

in Embed, Fonts

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.

{ 16 comments… read them below or add one }

1 Chris October 26, 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

Reply

2 peterd October 26, 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

Reply

3 Frederik Heyninck November 23, 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?

Reply

4 Janet March 10, 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.

Reply

5 Davidyn May 4, 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?

Reply

6 peterd May 4, 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

Reply

7 manovotny June 4, 2008 at 11:13 am

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

Reply

8 Colin Dean September 11, 2008 at 11:36 am

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?

Reply

9 Nisse Bergman December 19, 2008 at 2:38 am

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

Reply

10 Justin Winter March 15, 2009 at 4:23 pm

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?

Reply

11 Ben May 5, 2009 at 1:52 pm

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.

Reply

12 Ben May 5, 2009 at 4:01 pm

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.

Reply

13 lordB8r September 23, 2009 at 1:21 pm

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?

Reply

14 Peter deHaan September 23, 2009 at 6:14 pm

@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

Reply

15 Yannick Lacaute March 12, 2010 at 6:45 am

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

Reply

16 Peter deHaan March 12, 2010 at 8:17 am

@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

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: