Comments on: Styling a Flex Button control using embedded fonts

By: ForrestB

ForrestB — Wed, 14 Sep 2011 01:10:11 +0000

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.

By: Mati

Mati — Sun, 03 Jan 2010 09:42:46 +0000

thanks for the article,i used flex button skinning using css and swf file , got idea from this tutorial http://www.askmeflash.com/tutorial/4/skinning-a-flex-button-tutorial-using-skin-in-flex

By: Ron White

Ron White — Sat, 12 Dec 2009 07:21:58 +0000

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

By: peterd

peterd — Mon, 05 May 2008 15:33:34 +0000

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:


    @font-face {
        src: url("fonts/Arial.ttf");
        fontFamily: ArialEmbedded;
        fontStyle: normal;
        fontWeight: normal;
    }


    Application {
        color: white;
        fontSize: 12px;
        fontFamily: ArialEmbedded;
    }

    Button {
        fontWeight: normal;
    }

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


    @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;
    }

Peter

By: Eric Fields

Eric Fields — Mon, 05 May 2008 14:53:10 +0000

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.