Styling a Flex Button control using embedded fonts

The following example shows how you can customize the appearance of a Flex Button control by using an embedded font and removing the Button’s default skin.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/28/styling-a-flex-button-control-using-embedded-fonts/ -->
<mx:Application name="Button_style_test"
    xmlns:mx="http://www.adobe.com/2006/mxml"
    applicationComplete="init()"
    layout="vertical"
    verticalAlign="middle"
    backgroundColor="white">

    <mx:String id="fileName" />
    <mx:String id="fileSize" />

    <mx:Script>
        <![CDATA[
            private function init():void {
                var appInfo:LoaderInfo = Application.application.loaderInfo;
                /* Just grab the filename from the SWF URL. */
                fileName = (appInfo.url).split("/").pop();
                /* Convert bytes to kilobytes. */
                fileSize = (appInfo.bytesTotal / 1024).toFixed(2);
            }
        ]]>
    </mx:Script>

    <mx:Style>
        @font-face{
            src: url("./fonts/base02.ttf");
            fontFamily: "Base02";
        }

        .myButtonStyle {
            embedFonts: true;
            fontFamily: Base02;
            fontWeight: normal;
            fontSize: 24;
            cornerRadius: 0;
            letterSpacing: 4;
            textRollOverColor: red;
            skin: ClassReference(null);
            icon: Embed(source="./assets/iconInstall.png");
        }
    </mx:Style>

    <mx:ApplicationControlBar id="applicationControlBar" dock="true">
        <mx:Label id="info" text="{fileName} ({fileSize}kb)" />
    </mx:ApplicationControlBar>

    <mx:Button id="btn" label="{btn.getStyle('fontFamily')}" styleName="myButtonStyle" />

</mx:Application>

View source is enabled in the following example.

[Base02]

5 thoughts on “Styling a Flex Button control using embedded fonts

  1. Is there any trick to getting a common Button to use embedded fonts? I’ve got the following:

    @font-face {
    src: url(“fonts/Arial.ttf”);
    fontFamily: ArialEmbedded;
    fontStyle: normal;
    fontWeight: normal;
    }
    Application {
    color: white;
    fontSize: 12px;
    fontFamily: ArialEmbedded;
    }

    And the Button text defaults to some gross serif font. So i tried

    Application, Button { …

    And still nothing. So I just tried

    Button {
    embedFonts: true;
    fontFamily: ArialEmbedded;…

    Still doesn’t pick up the font. Still the serif.

    Thank you.

  2. Eric Fields,

    The problem is that you only embedded the normal font weight for the Arial font, and by default the Button control’s label is bold. You have two options:
    1) Set the button’s label to use normal font weight instead of bold by setting the fontWeight style:

    <mx:Style>
        @font-face {
            src: url("fonts/Arial.ttf");
            fontFamily: ArialEmbedded;
            fontStyle: normal;
            fontWeight: normal;
        }
    
    
        Application {
            color: white;
            fontSize: 12px;
            fontFamily: ArialEmbedded;
        }
    
        Button {
            fontWeight: normal;
        }
    </mx:Style>
    

    2) Embed both the normal and bold font weights in your application:

    <mx:Style>
        @font-face {
            src: local("Arial");
            fontFamily: ArialEmbedded;
            fontStyle: normal;
            font-weight: normal;
        }
    
        @font-face {
            src: local("Arial");
            fontFamily: ArialEmbedded;
            fontStyle: normal;
            font-weight: bold;
        }
    
        Application {
            color: white;
            fontSize: 12px;
            fontFamily: ArialEmbedded;
        }
    </mx:Style>
    

    Peter

    1. Thank you, you have saved me several more days trying to figure this out. Love the website by the way, I’m new to Flex and it has helped me out many times.

  3. Thank you for this information.
    I have spent many hours trying to figure out why the labels embed the font and the buttons did not. Who would have guessed that the buttons want the bold font.

    Mystery Solved.

    Thanks
    RW

Comments are closed.