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;

9 thoughts on “Embedding fonts in a Flex application using Embed metadata

  1. Do you happen to know what font formats are supported? I assume that both Windows and Mac fonts can be used?

  2. Hi,
    I have tried it and it works compile time.WHen i want to do it runtime,for example i am changing a combo box and i want to change the font-family of a textarea text.Its not working.I am using setStyle() for it.Can u suggest something for the same.

  3. sheetal nilwant,

    The following example shows how you can dynamically change the font family on a Flex TextArea control using data binding:

    <?xml version="1.0"?>
    <Application xmlns="http://www.adobe.com/2006/mxml"
            backgroundColor="white">
    
        <ApplicationControlBar dock="true">
            <ComboBox id="comboBox"
                    dataProvider="[Arial,Verdana,Times New Roman,Trebuchet MS,Comic Sans MS]" />
        </ApplicationControlBar>
    
        <TextArea id="textArea" fontFamily="{comboBox.selectedItem}">
            <text>The quick brown fox jumps over the lazy dog.</text>
        </TextArea>
    
    </Application>
    

    Peter

  4. Sorry, here’s an example using the setStyle() method:

    <?xml version="1.0"?>
    <Application xmlns="http://www.adobe.com/2006/mxml"
            backgroundColor="white">
    
        <Script>
            <![CDATA[
                import mx.events.ListEvent;
    
                private function comboBox_change(evt:ListEvent):void {
                    var fontName:String = comboBox.selectedItem.toString();
                    textArea.setStyle("fontFamily", fontName);
                }
            ]]>
        </Script>
    
        <ApplicationControlBar dock="true">
            <ComboBox id="comboBox"
                    dataProvider="[Verdana,Times New Roman,Trebuchet MS,Comic Sans MS]"
                    change="comboBox_change(event);" />
        </ApplicationControlBar>
    
        <TextArea id="textArea">
            <text>The quick brown fox jumps over the lazy dog.</text>
        </TextArea>
    
    </Application>
    

    Peter

  5. Peter,

    Thanks for the demo. One problem I keep running into is the limit of how many embedded fonts I can put into a css before it brings my compiler to a standstill. Essentially, I want to create a RichTextEditor (toolbar separated) that can rotate, but unless I embed the fonts (including normal, bold, italic, and bold & italic), the font disappears the moment rotation passes 1 degree.

    One thing I’ve tried doing is limiting the number of fonts available to 8 fonts (i.e. Arial, Courier, etc), but even that makes me need to have 32 @font-face statements in my css, otherwise the bold or italics (or combined) won’t work. If I remove the css, then I lose the text upon rotate. Any thoughts/help? Thanks,

    lordB8r

    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

Comments are closed.