Adobe Flex 3 to Flex 4: Rotated Text Disappears on Embedded font

Question

I recently upgraded a Flex 3 project to Flex 4 "MX Only" and prior to the upgrade, I had some rotated text which now does not render. I have embedded the font ("Verdana") within my CSS Stylesheet using the following declaration:

/* CSS file */
@namespace mx "library://ns.adobe.com/flex/mx";

@font-face
{
    fontFamily: Verdana;
    src: url(VERDANA.TTF);
}
mx|global
{
    fontFamily: Verdana;
    fontSize: 12;
    fontWeight: normal;
}

I have placed my .TTF file within the project /assets/VERDANA.TTF and have even swapped it with other .TTF files to make sure the font is getting embedded.

The problem is that my rotated text no longer renders. Quite literally anything except rotation="0" simply fails to display on screen. I thought that perhaps using the system font name "verdana" was causing a problem, so I changed it to "MyVerdana" and verified that the name was not causing the problem.

I have substituted rotationX="-10" instead of using rotation and I do see the text skew backwards, but when I try rotationY or rotationZ again the text vanishes.

If anyone has any words of wisdom, advice, or helpful hints, I would sure love to know if there is something I'm doing wrong. Here is my code:

 <mx:Text text="Something that looks much better with a slight incline"
 rotation="-10"/>

I know the TLF changed but I'm not using any spark classes (and can't without having to rework parts of the project). Thanks all.

Answer 1

The way fonts are embedded has changed between 3 and 4. Are you sure your Verdana font is getting embedded and displayed and not the default font? Here's some info on font embedding in 4 from the docs. I think you will probably need to pay attention to the embedAsCFF property, which you will likely want to set to false. Hope that helps.

http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7f5f.html