flex 4.5 embeding font makes textarea invisible

Question

My goal is to have embed Arial fonts in Flex Application. I used both MX and SPARK components:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:s="library://ns.adobe.com/flex/spark"
    width="100%" height="100%" >
<mx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

@font-face {
    src:url("assets/arial.ttf");
    fontFamily: Arial;
    embedAsCFF: true;
}
</mx:Style> 
<s:Button label="Button"/>
<mx:TextArea x="213" y="156" width="264" height="131" fontFamily="Arial"/>
</mx:Application>

Button displays well. But textArea has blank characters. If I change texteArea font To Verdana (not embedded), it works fine !

My question is: How to have embedded fonts for MX and SPARK components in Flex ?

Regards

Trish Rempel Trish Rempel · Accepted Answer · 2012-09-12T23:19:27

You need to specify a separate font declaration for MX and Spark components. Only Spark components support embedAsCFF: true. See Embedding non-CFF versions of fonts for MX components.

Below, I named the Spark font declaration ArialCFF, and set the s|Button fontFamily style property to ArialCFF. I also set the global default fontFamily to Arial, and the mx|TextArea fontFamily to Arial.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:s="library://ns.adobe.com/flex/spark"
    width="100%" height="100%" >
<mx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

global {
    fontFamily: Arial;
}

@font-face {
    src:url("assets/arial.ttf");
    fontFamily: ArialCFF;
    embedAsCFF: true;
}

@font-face {
    src:url("assets/arial.ttf");
    fontFamily: Arial;
    embedAsCFF: false;
}

s|Button {
    fontFamily: ArialCFF;
}

mx|TextArea {
    fontFamily: Arial;
}

</mx:Style> 
<s:Button label="Button"/>
<mx:TextArea x="213" y="156" width="264" height="131"/>
</mx:Application>

flex 4.5 embeding font makes textarea invisible

1 Answers