Embedding fonts in a Flex application using Embed metadata (redux)

In a previous example, “Embedding fonts in a Flex application using Embed metadata”, we saw how you could embed fonts using the [Embed] metadata with the source attribute.

The following example shows how you can embed system fonts in a Flex application using the [Embed] metadata with the systemFont attribute.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/01/embedding-fonts-in-a-flex-application-using-embed-metadata-redux/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .regularFontStyle {
            fontFamily: regularFont;
        }

        .italicFontStyle {
            fontFamily: italicFont;
            fontStyle: italic;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.utils.ObjectUtil;

            [Bindable]
            [Embed("bulletWarning.png")]
            private var bulletWarningIcon:Class;

            [Embed(systemFont="Tahoma",
                    fontName="regularFont",
                    mimeType="application/x-font")]
            private var font1:Class;

            [Embed(systemFont="Tahoma",
                    fontName="italicFont",
                    fontStyle="italic",
                    advancedAntiAliasing="true",
                    mimeType="application/x-font")]
            private var font2:Class;

            private function displayEmbeddedFont(name:String):void {
                var font:Object = systemManager.embeddedFontList[name];
                Alert.show(ObjectUtil.toString(font), name + ":");
            }
        ]]>
    </mx:Script>

    <mx:Form>
        <mx:FormItem label="regularFont:" direction="horizontal">
            <mx:Label id="lbl1"
                    text="The quick brown fox jumped over the lazy dog."
                    styleName="regularFontStyle" />
            <mx:Image source="{bulletWarningIcon}"
                    click="displayEmbeddedFont('regularFont');" />
        </mx:FormItem>
        <mx:FormItem label="italicFont:" direction="horizontal">
            <mx:Label id="lbl2"
                    text="The quick brown fox jumped over the lazy dog."
                    styleName="italicFontStyle" />
            <mx:Image source="{bulletWarningIcon}"
                    click="displayEmbeddedFont('italicFont');" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

8 thoughts on “Embedding fonts in a Flex application using Embed metadata (redux)

  1. Thanks for the explanation.
    My problem with system font embedding is that the system font becomes antialised – which means it doesn’t looks so sharp as it could. As far as I understand fontAntiAliasType doesn’t apply to system fonts. So what can be done?

  2. That would be an interesting answer. I’m searching my a.. off right now to find a solution to get the font sharper. But I need the embedding to animate everything properly :-/

  3. Hi, thanks for this great acrticle. WIll this font embedding also work with a HTMLControl? Can i embed a special font and use it in the Webpage?
    Thanks in advance for a response.
    Robert

  4. Hi Everyone,
    I’m trying to place a button in vertical mode in flex 3. I am using the rotation property set to 90. It works great but the label of button disappears. Is there any way to retain the label of the button in vertical mode as the button is.

    looking for some response …..

  5. Hey Peter,
    the nice thing is, you could use the same fontName for all tpefaces of a font. So in the css you would specify if you want to use the imported italic or not.

  6. Alex beata , sub say pehlay font embed kerwoo phir button ko stylename apply karo, ager phir b na hoo to HOD flex say poooch lena.

    Samj aieeeeeeeeee

Comments are closed.