Flex Chronicles #22: Embedding Fonts in a Button

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 ::

24 Replies to “Flex Chronicles #22: Embedding Fonts in a Button”

  1. 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

  2. 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.

  3. 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.

  4. 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.

  5. Thanks a lot for the Tip I have been struggling a lot about this problem .

    Oh, by the way, Moon your comment sucks…

  6. 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!

  7. I seem to have an issue with the selected tab not getting the embedded font. Any ideas on how to solve this?

  8. 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 :)

  9. 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!

  10. 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 {

    }

  11. 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!

  12. 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.

  13. 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!

  14. 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.

  15. 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.

  16. 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…

Comments are closed.