Using an embedded font with the LinkButton control in Flex

by Peter deHaan on September 4, 2008

The following example shows how you can use an embedded font with the Flex LinkButton control by setting the fontFamily and fontWeight styles.

The LinkButton control uses a bold font weight by default, so you need to either embed the bold font weight, or set the LinkButton control’s fontWeight style to normal.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/04/using-an-embedded-font-with-the-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_fontFamily_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Arial");
            fontFamily: ArialEmbedded;
            fontWeight: bold;
        }

        LinkButton {
            fontFamily: ArialEmbedded;
        }
    </mx:Style>

    <mx:LinkButton id="linkButton"
            label="LinkButton"
            rotation="45" />

</mx:Application>

View source is enabled in the following example.

You can also embed the font using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/04/using-an-embedded-font-with-the-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_fontFamily_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.LinkButton;

            [Embed(systemFont="Arial",
                    fontName="ArialEmbedded",
                    fontWeight="bold",
                    mimeType="application/x-font")]
            private const arialEmbedded:Class;

            private var linkButton:LinkButton;

            private function init():void {
                linkButton = new LinkButton();
                linkButton.label = "LinkButton";
                linkButton.rotation = 45;
                linkButton.setStyle("fontFamily", "ArialEmbedded");
                addChild(linkButton);
            }
        ]]>
    </mx:Script>

</mx:Application>

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

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: