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>

7 thoughts on “Using an embedded font with the LinkButton control in Flex

  1. embedding a system font is easy (everyone has got ’em .. unless they live in a cave… so they will display)… its those nasty custom ones that are the tricksters =)

  2. sorry, didn’t mean for that to sound as rude as it did, I think this blog is awesome, I hve referred to it many times for little side helpers.

  3. peterd, thanks for all you great examples on flex, I learned a lot from you site. but currently I got a problem on my project, I’m wondering if you can help me out, cause I couldn’t find any solution on the internet.

    I’m getting youtube videos from their API and load them into a TileList, is there any way I can show a preloader before all video thumbnails loaded, why dataChange event doesn’t work? but when I trace all the events during the loading, dataChange was there.

    any help would be appriciated.~~

    regards,

    Sky

  4. peterd, sorry, I forgot to tell you that because I have mutipule pages, so that when I change the page, I need a preloader before all videos loaded. thanks~~

  5. Hi there peterd.

    And first of all thanks for all your nice examples.

    I have a problem using your embedded-font examples, when i change the stage quality to low.

    … applicationComplete=”stage.quality = StageQuality.LOW;” …

    Moving the mouse over the linkbutton now seems to mess it up.
    Have you experienced something similar, and do you perhaps know what is causing this.

    I have explained my problem in further detail here:
    http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid=1424781&enterthread=y

    many thanks in advance.

  6. Hi Peter.

    And thanks.

    Usually I don’t think it is necessary to set the stage quality to low, but in this particular application i am trying to “integrate” some 3d-graphics (using away3d) and the standard 2d-graphics of flex. In order to get the 3d-graphics running smoothly it is needed to set the quality to low. This has the negative effect of messing up the 2d-buttons.

    As far as I know there isn’t a way to make the 3d-graphics use low quality rendering while the 2d-graphics use a higher rendering quality.

    Stissing

Comments are closed.