Embedding fonts with MX components

The embedAsCFF (Compact Font Format) property indicates whether to embed a font that supports the advanced text layout features used by the Flash Text Engine (FTE). This is sometimes referred to as DefineFont4. If you set the value of the embedAsCFF property to true, then you can only use that font with controls that support FTE. If you set the value of the embedAsCFF property to false, then the embedded font does not support FTE and you can only use that font with controls that do not have FTE support.

The implications of this appear when you try to use MX controls with a font that was embedded with FTE support. In those cases, the text does not appear, as the following example shows.

In the first panel, the embedded CFF font is applied to the Spark control and the embedded non-CFF font is applied to the MX control. The result is that the Button labels show correctly. In the second Panel, both Button labels use the CFF font. The result is that no text appears for the MX control in the second Panel because the MX control does not support CFF.
<?xml version="1.0"?>
<!-- fonts/CFFTest.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark">

    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout>

  <fx:Style>
     @font-face {
        src:url("../assets/MyriadWebPro.ttf");
        fontFamily: myCFFFont;
        embedAsCFF: true;
     }

     @font-face {
        src:url("../assets/MyriadWebPro.ttf");
        fontFamily: myFontNoCFF;
        embedAsCFF: false;
     }
     
     .myCFFStyle {
        fontSize: 32;
        fontFamily: myCFFFont;
     }

     .myStyleNoCFF {
        fontSize: 32;
        fontFamily: myFontNoCFF;
     }
  </fx:Style>

  <s:Panel title="Using Correct Fonts"> 
    <s:VGroup>
        <s:Button label="Spark Button" styleName="myCFFStyle"/> 
        <mx:Button label="MX Button" styleName="myStyleNoCFF"/>
    </s:VGroup>
  </s:Panel>

  <s:Panel title="Using Incorrect Fonts"> 
    <s:VGroup>
        <s:Button label="Spark Button" styleName="myCFFStyle"/> 

        <!-- The Button label will not show up because it's a MX control that
        is attempting to use a Spark-compatible embedded font. -->
        <mx:Button label="MX Label" styleName="myCFFStyle"/>
    </s:VGroup>
  </s:Panel>

</s:Application>
The executing SWF file for the previous example is shown below:

As this example illustrates, if you mix MX and Spark controls inside the same application, you might not be able to use the same embedded font.

There are two possible remedies to this situation:

  • Specify that the MX controls use FTE classes to render text, rather than their default text renderers.

  • Embed both the non-CFF version of the font in addition to the CFF version of the font. This is the less-desireable approach because it increases the size of your SWF file.

The following sections describe each of these solutions.