Flex Pasta » Embedded Fonts + Modules + Charts = Problem

Embedded Fonts + Modules + Charts = Problem

I was using an embedded font today with modules and charts.  My embedded font is declared in the css file and is only referenced in the main application page and not in each module.  When embedding the font in the main application, I would expect the font to be carried over into each module, the same way all the other styles work with modules.  For some reason though, the labels on the axes of the column chart don’t appear when the chart is in a module using an embedded font.  I have opened a bug with Adobe regarding this issue.  I’m not sure if it’s the chart doing something weird or the Flex compiler(or maybe me!).  In any case, I don’t think the labels should disappear.

Run the example and see for yourself the behavior: Charting.swf

Panel 1 is a column chart declared in the main application and Panel 2 is the exact same column chart in a module.  There is an embedded font ‘Verdana’ in the main application.

Charting.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”horizontal” xmlns:local=”*”>
<mx:Style>
Application
{
font-family: Verdana;
}
@font-face {
src:url(”font/verdana.ttf”);
fontFamily: Verdana;
advancedAntiAliasing: true;
}
@font-face {
src:url(”font/verdanab.ttf”);
fontFamily: Verdana;
fontWeight: bold;
advancedAntiAliasing: true;
}
@font-face {
src:url(”font/verdanai.ttf”);
fontFamily: Verdana;
font-style: italic;
advancedAntiAliasing: true;
}
</mx:Style>
<local:ColumnChart width=”50%” height=”100%” title=”Chart 1″/>
<mx:ModuleLoader url=”ChartModule.swf” width=”50%” height=”100%”/>
</mx:Application>

7 Comments

  • 1. paul replies at 22nd November 2008, 6:23 pm :

    I was having some of the same issues - don’t know if it would help but I used the ModuleLoader and StylyeManager to load my separate module and compiled stylesheet and specified the ApplicationDomain.currentDomain for both and that seemed to solve those kind of issues…

  • 2. kaciara replies at 25th November 2008, 7:22 am :

    i had same problem

    charting + embedd font worked in previous ver of flexbuilder

    now with latest update it doesn’t

  • 3. feiy replies at 26th November 2008, 8:40 am :

    i had same problem,
    worked in previous version of flexbuilder chart
    and it’s fail in lasted version chart component

  • 4. Roger Gonzalez replies at 19th December 2008, 2:31 pm :

    Not sure where things stand these days, but back when I wrote the modules system, there were some significant complications with respect to embedded fonts and modules, particularly through MXML/CSS. I mention it in my original MAX preso here: http://blogs.adobe.com/rgonzalez/2006/11/my_max_preso.html

    Note that the issue has nothing to do with charting, its a low-level issue. Fonts are (were?) an old system that didn’t know anything about ApplicationDomain, so the rules for cross-SWF access were significantly weirder and didn’t map to modules very well.

  • 5. Julio Armando replies at 18th March 2009, 11:39 am :

    Is there a way to embed a module?

  • 6. Narayan Reddy replies at 7th September 2011, 3:41 am :

    Lables are not rotating in flex charts when we use in modules.

  • 7. Narayan Reddy replies at 7th September 2011, 3:52 am :

    Embed font is not working in charts with in modules .

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <em> <strong>