Using an embedded font with the LinkButton control in Flex

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>

Tagged as: fontFamily, fontWeight