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.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/28/styling-a-flex-button-control-using-embedded-fonts/ -->
<mx:Application 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.
I didn’t include the TrueType font in the source code ZIP. If you want to grab that exact font, head over to the creator’s site @ http://www.stereo-type.net/ and download “Base 02″.
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.
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
fontWeightstyle:<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