Issues with Embedded Fonts in Flex Modules

assertTrue is the professional blog of Luke Bayes and Ali Mills

Issues with Embedded Fonts in Flex Modules

Posted by Ali Mills Fri, 08 Jun 2007 18:18:00 GMT

We’re working on a modular application in Flex and until recently were having issues with embedded fonts in modules. The main issue was that we wanted fonts embedded in the main CSS to be available in the loaded modules, and we were having a heck of a time getting this to work.

Some research led me to Alex Harui’s post about how to use embedded fonts in modules and late-load the embedded font. Alex’s example demonstrates Flex 2.0.1’s new runtime CSS approach and uses the StyleManager class.

We’re not, however, interested in loading the CSS at runtime (although we reserve the right to change our mind, because it’s a really handy thing to be able to do), so I modified Alex’s example to more closely represent our application structure with hopes of finding my mistake. After the modification, it became clear that I wasn’t making a mistake, but that I had run into a bug. Can you spot it? Here’s the code…

MyAppStyle.css

@font-face {
        src:url("assets/Vera.ttf");
        font-family: myFont;
}

@font-face {
        src:url("assets/Verabd.ttf");
        font-family: myFont;
        font-weight: bold;
}

.myFont {
    font-family: myFont;
}

MyApp.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
    <mx:Style source="MyAppStyle.css" />

    <mx:TabNavigator id="tn" width="100%" height="100%" >
        <mx:VBox label="Panel 1" >
        </mx:VBox>
        <mx:ModuleLoader url="MyDataGridView.swf" label="Panel 2" />
        <mx:ModuleLoader url="MyDataGridView2.swf" label="Panel 3" />
    </mx:TabNavigator>    
</mx:Application>

MyDataGridView.mxml

<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Text 
        fontFamily="myFont"
        text="PANEL TWO"
        rotation="5" />

</mx:Module>

MyDataGridView2.mxml

<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Text 
        styleName="myFont"
        text="PANEL THREE" 
        rotation="10" />

</mx:Module>

The code looks like it should work, doesn’t it? The Text components in tabs 2 and 3 should rotate and contain embedded text. Well, they don’t. The code doesn’t work. Here’s the resulting SWF, which was compiled using the link-report and load-externs compiler options, as proof:

Hm…

Well, it appears that there’s a MXMLC or Flex framework bug that prevents embedded fonts from showing up in modules built using load-externs unless the class definition of the component presenting the font is included in the main application. To address the bug, we modified MyApp.mxml to include the class definition for Text, and it worked! Here’re the file changes and the working SWF which, again, was compiled using the link-report and load-externs options:

MyApp.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
    <mx:Script>
    <![CDATA[
        import mx.controls.Text;
        private var textRef:Text;
    ]]>
    </mx:Script>
    <mx:Style source="MyAppStyle.css" />

    <mx:TabNavigator id="tn" width="100%" height="100%" >
        <mx:VBox label="Panel 1" >
        </mx:VBox>
        <mx:ModuleLoader url="MyDataGridView.swf" label="Panel 2" />
        <mx:ModuleLoader url="MyDataGridView2.swf" label="Panel 3" />
    </mx:TabNavigator>    
</mx:Application>

Download Alex’s modified files here.

Tags actionscript, bugs, flex, flexbuilder | no comments | no trackbacks