The deal with embedded fonts, buttons and Rotate

Tonight I struggled with a problem I've faced before, only last time I didn't blog or write down my solution anywhere. I'm on a quest to create a vertical Accordion. Now the fastest way to do this would be to simply apply a rotate effect to it. Here's the code:

private function setAccordion():void{
 var rot:Rotate = new Rotate();
 rot.angleTo = 270;
 rot.duration = 1;
 rot.originX = acc.width/2;  //need it to rotate around it's center
 rot.originY = acc.height/2;  //    -- " --
 rot.target = acc;  //acc is my Accordion control
 rot.play();
}

I figured this part out a while ago. Without the originX and originY properties set, your control can disappear completely, especially if it's x and y are set to 0. I am currently calling this function from Initialize and have not encountered any issues. What I was having a problem with is that my Accordion header text would disappear during the rotation. Now I know that if I embed a font:

<mx:Style>
@font-face {
 src:url("lucidaGrande.swf"); 
 fontFamily: "Lucida Grande";
} 
Application{
        fontFamily: "Lucida Grande"; 
}
</mx:Style>

then the text of my controls should remain intact thoughout the rotation. But this didn't work. I could clearly see that the font in my Accordion Header was not the embedded font, nor was it the default system font. I dropped a button on my application and saw the same behaviour. It wasn't till I added a label that I saw the embedded font appear.

I tried quite a few things... but in the end it turned out that the above Styles only applied to controls that display text with a default fontWeight of Normal. This would explain why the AccordionHeader, which I believe extends Button, and the Button controls didn't render the embedded font. I modified my css:

<mx:Style>
@font-face {
 src:url("lucidaGrande.swf"); 
 fontFamily: "Lucida Grande";
 fontWeight: bold;
} 
@font-face {
 src:url("lucidaGrande.swf"); 
 fontFamily: "Lucida Grande";
 fontWeight: normal;
}  javascript:void(0)
Publish
Application{
    fontFamily: "Lucida Grande";
}
</mx:Style>

and everything worked just beautifully. Of course, now I need to figure out how to rotate the canvas' within the Accordion back to their original position. And figure out how to keep the Accordion in the same place, and why there's a vertical scroll bar now... ack. It never ends...

On a side note, I also stumbled upon a property called
rotation. This is a nice shortcut alternative to the rotate.play, however without the benefit of being able to set originX and originY.