Problems with embedded font on spark RichText control

Question

« Hide
I have an embedded font that appears correctly when used with Halo components, but when associated with the spark RichText component, it is not recognized.
The embedded font is defined in css file, my css file
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
@font-face {
src:url("assets/fonts.swf");
fontFamily: "Helvetica Neue";
@font-face {
src:url("assets/fonts.swf");
fontFamily:"Helvetica Neue";
fontWeight: bold;
global{
color:#333333;
fontFamily: "Helvetica Neue";
fontSize:12px;
The embedded font it used in the following manner:
<mx:Label styleName="panelTitle" text="Hello There"  width="263" x="21" y="11"/>
<s:Group width="410" x="38" y="52" height="50">
<s:RichText styleName="panelTitle" text="Hello There" fontFamily="Helvetica Neue"  width="263" x="21" y="11"/>
</s:Group>
The Label shows the embedded font correctly while the RichText control does not. It does not matter if the fontFamily is specified explicitly on the control or not.
I created a bug SDK-22137, but since I'd need to get this working soon any help would be appreciated.

Answer 1

Just a friendly reminder. Many of the examples on that site are fairly old and havent been updated to use the latest APIs. For example, "cff" has recently been renamed to "embedAsCFF". In fact, here's a better example:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingTop="20" />
    </s:layout>
    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/halo";
        @namespace s "library://ns.adobe.com/flex/spark";
        /* DefineFont3 (embedAsCFF == false) */
        @font-face {
            src: url("assets/georgia.TTF");
            fontFamily: embGeorgia;
            fontWeight: normal;
            embedAsCFF: false;
        @font-face {
            src: url("assets/georgiab.TTF");
            fontFamily: embGeorgia;
            fontWeight: bold;
            embedAsCFF: false;
        /* DefineFont4 (embedAsCFF == true) */
        @font-face {
            src: url("assets/georgia.TTF");
            fontFamily: embGeorgiaCFF;
            fontWeight: normal;
            embedAsCFF: true;
        @font-face {
            src: url("assets/georgiab.TTF");
            fontFamily: embGeorgiaCFF;
            fontWeight: bold;
            embedAsCFF: true;
        mx|Label {
            fontFamily: embGeorgia;
        s|RichText {
            fontFamily: embGeorgiaCFF;
            fontLookup: embeddedCFF;
    </fx:Style>
    <mx:Label text="Halo Label" />
    <mx:Label text="Halo Label (bold)" fontWeight="bold" />
    <s:RichText text="Spark RichText" />
    <s:RichText text="Spark RichText (bold)" fontWeight="bold" />
</s:Application>
Also, depending on what you're trying to do, this may help you: http://blog.flexexamples.com/2009/06/14/using-a-cff-embedded-font-with-a-halo-label-contro l-in-flex-4/. Basically, you can set the textFieldClass style on certain Halo controls and have them use the mx.core.UITLFTextFieldClass (instead of the default mx.core.UITextFieldClass) so they can take advantage of the new CFF fonts.
In fact, here's the same example as above, but with the single embedded font:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingTop="20" />
    </s:layout>
    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/halo";
        @namespace s "library://ns.adobe.com/flex/spark";
        /* DefineFont4 (embedAsCFF == true) */
        @font-face {
            src: url("assets/georgia.TTF");
            fontFamily: embGeorgiaCFF;
            fontWeight: normal;
            embedAsCFF: true;
        @font-face {
            src: url("assets/georgiab.TTF");
            fontFamily: embGeorgiaCFF;
            fontWeight: bold;
            embedAsCFF: true;
        mx|Label {
            fontFamily: embGeorgiaCFF;
            textFieldClass: ClassReference("mx.core.UITLFTextField");
        s|RichText {
            fontFamily: embGeorgiaCFF;
            fontLookup: embeddedCFF;
    </fx:Style>
    <mx:Label text="Halo Label" />
    <mx:Label text="Halo Label (bold)" fontWeight="bold" />
    <s:RichText text="Spark RichText" />
    <s:RichText text="Spark RichText (bold)" fontWeight="bold" />
</s:Application>
Peter