There are a few dark little secrets to the Button control in Flex 2 that can trip a designer up. It took me 2 1/2 hours to figure this shiz out so I just HAVE to blog it. I’m running on fumes, and this is the 3rd blog entry in the past 30 minutes, but my fingers never tire; they’re always willing to move furiously. They know I have words I need to get out, and fast because there is so much to do and so little time. My head feels like lead… it keeps swaying… wtf, am I at sea?
The mx.controls.Button class utilizes a mx.core.UITextField for it’s text label. This class basically wraps TextField, and add some CSS & measurement support so it’s easier to work with. By default, a Button’s label is bold.
This may seem minor, but if you try to embed a font, and apply the style to the button, it won’t work. You’ll apply the same style to Label’s, and see it work just fine, and go, ‘WTF?“. You can use a horrible hack, and utilize the mx_internal namespace, call getTextField on the Button, and call embedFonts on it to true. You can then apply this to every event a Button emits, and duct tape that mofo into submission. This looks & works horrible.
The problem stems from the fact that when you are embedding a font, you aren’t always embedding the bold version of it. Some fonts don’t have bold equivalents, and some are specifically to be made bold, but aren’t seen as bold by some tools. Lame.
The fix? 3 lines of CSS.
Let me stop and just say right quick that Flex 2’s implementation of CSS is off the hook! It’s come a long way from Flex 1.5. I spent 4 hours the other day in CSS. That’s right… 4 hours in Firefox & CSS skinning & incorporating a design. Not MXML, not ActionScript, but CSS! Insanity. It feels so much like web design, but… something’s different… oh yeah, I know! My design actually, you know, works the same in every browser and looks like I intended with no compromises!
Anyway, you overwrite the Button’s main style attributes. You ensure he’s embedding fonts, you set his font weight to normal, and you set his default font, like so:
Button
{
embedFonts: true;
fontWeight: normal;
fontFamily: oldSkool;
}
@font-face
{
src:url("PAPYRUS.TTF");
fontFamily: oldSkool;
}
This is a big deal because a lot of components use Button. You’ll have the same font problems with them as well, such as TabBar/TabNavigator, and LinkButton/LinkBar to name a few. Doing the above vs. using a custom style ensures that all LinkButtons and Tab’s will now use your font. w00t!
:: collapses ::
RSS Feed
uh I`m sorry that it took you 4 hours.
I solved the same problemt in 10minutes with the same attempt. I think I should start bloggin to share experience
m00n
July 11th, 2006
Naw, 2 1/2, not 4. Font didn’t work. Dug in Button and saw he used UITextField. Found UITextField and debugged his TextFormat. TextFormat wasn’t keeping embedded fonts. This was happening because SystemManager claimed his font wasn’t embedded. This is because he kept telling it to look for a bold font… THAT is what took 2 1/2 hours to find out.
Yes, if you know this shiz, please start a blog, the community will eat this stuff up! Go to Blogger, TypePad, whatever, and get yerself on MXNA.
JesterXL
July 11th, 2006
w00t
ilya
July 13th, 2006
It worths diggin!
You spent your 2 1/2 hours adultly.
Rostislav Siryk
July 16th, 2006
Hey Jester,
I have a stupid question, but i don’t want to spend 4 hours trying to find out if you already know.
How in the name of G do you get rid of this black rollOver color on buttons, checkbox labels, tabs…
The roll-over-color attribute does nothing, neither the use-roll-over…
I’m lost !
Best, Jean-Luc.
Jean-Luc
July 26th, 2006
Oops never mind, i said it was a stupid question !
I forgot about the text-roll-over-color property !
Jean-Luc
July 26th, 2006
mOOn you really come across as a jerk. Jester is the man for being so helpful. He probably saved me 10 hours on this one.
Jclouz
September 28th, 2006
can’t thank you enough for that.
I did loose 4 hours trying to understand what was going on before hitting google..
so much for my first flex day.
thibaud
October 3rd, 2006
Thanks a lot for the Tip I have been struggling a lot about this problem .
Oh, by the way, Moon your comment sucks…
Luc
June 27th, 2007
Total Props to you for sharing this… I have spent more than 10 hours working this one out and WOOT you gave me the answer.
I have started a blog to share with others my learnings… as soon as I learn something I will share it!
Greg
September 17th, 2007
I seem to have an issue with the selected tab not getting the embedded font. Any ideas on how to solve this?
Greg
September 17th, 2007
I was just spinning my wheels on this problem and came across your solution, thanks! Ironically, I was just reading a different blog entry of yours yesterday
John R. Nyquist
January 25th, 2008
Thank you sooo much for sharing this info. It is very helpful. I spent a lot of time trying to figure why the embed fonts in tabNavigator didn’t work. I was mad enough that i named fontFamily: wtf; lol..
Anyway, your solution fixes the issue. Thank you again!
yoko
February 21st, 2008
I’d like to share the code for embedding fonts for tabNavigator:
@font-face{
/* Note that this font doesn’t support bold */
src: url(“FG11004T.TTF”);
fontFamily: myFuturaMediumEmbed;
unicode-range:
U+0041-U+005A, /* Upper-Case A-Z */
U+0061-U+007A; /* Lower-Case a-z */
}
Button {
embedFonts: true;
fontWeight: normal;
fontFamily: myFuturaMediumEmbed;
}
TabBar {
firstButtonStyleName: “tabStyle1″;
tabStyleName: “tabStyle2″;
lastButtonStyleName: “tabStyle3″;
selectedTabTextStyleName: “mySelectedTabs”;
fontSize: 16px;
}
.tabStyle1 {
}
.tabStyle2 {
}
.tabStyle3 {
}
hiKrittiya
February 22nd, 2008
Yeah, me too. You just saved my a BUNCH of time with this. Makes sense once you think about it, but would be nice if it were called out a bit more in the docs.
Thanks!
Evan
February 25th, 2008
Thanks a lot for this….. I have been trying for hours as well! Flex sometimes feels like your banging your heag against a very hard wall.
Fenn
March 4th, 2008
Nice Jessie! Thanks for the tip! I was just getting started on my hours long process of digging into this and luckily your post is going to save me the time!
James
May 6th, 2008
You are a god among men.
Thanks!
bobs
October 1st, 2008
This is a really bitchy trap! I’ve just wasted over 2 hours with this issue trying to get embedded Myriad Pro Condensed onto a Button. it works now – but only normal weight! I have yet to figure out to get Myriad Pro Cond Bold onto the button which seems to use the same font family name like the other Myriad font types.
sascha/hdrs
January 30th, 2009
You are my hero. Newbie flexer, and this has been doing my head in!
kat neville
February 1st, 2009
Take a look here that can help you:
http://simplestexplanation.com/2009/04/the-right-way-to-embed-fonts-in-adobe-flex-3/
Valdemar
June 9th, 2009
The problem with that way, Valdemar, is that you are embedding the whole font. Some fonts are 22k for the entire set, while others are 6 megs. The BEST way in my opinion, is it utilize Flash. You create a TextField, choose the font, the characters you wish to embed, and link to that SWF vs. the TTF file.
JesterXL
June 9th, 2009
Hi JesterXL. I`ve tried the swf method but, like sasha/hdrs, I couldn’t import both Myriad Pro Regular and Myriad Pro Condensed from the same swf because they conflit. The two need fontWeight:normal; and fontStyle: normal;
To solve this I had to go back to Flash divide into two swfs, one for the Regular and another for the Condensed.
As for the size I limited mine using these settings inside the @font-face style:
unicode-range:
U+0020-U+007E, /* englishRange */
U+00A1-U+00FF,U+2000-U+206F,U+20A0-U+20CF,U+2100-U+2183; /* Latin I */
The resulting size is similar to the swf method and it is easear to edit.
So, (if I am not missing something here ’cause I’m new to Flex) the option to embed the fonts directly seems to be more practical and more effective than the swf option…
Valdemar
June 9th, 2009