[flexcoders] Styling itemrenderer

[candysmate]

I have a custom itemrenderer:

<?xml version="1.0" encoding="utf-8"?>
<mx:Text xmlns:mx="http://www.adobe.com/2006/mxml";
styleName="rendererStyle">
</mx:Text>

which I'm popping into a dataGridColumn with:

<mx:DataGridColumn
  headerText=""
  dataField="problem"
  editable="false"
  width="20"
  textAlign="center"
  color="#FF0000"
  rendererIsEditor="true"
  itemRenderer="myComponents.DGWingDingTextDisplay"
  >
  </mx:DataGridColumn>   

my style is setup thus:

@font-face {
     src:url("wingding.ttf");
     fontFamily: myFontFamily;
     flashType: true;
     font-weight:normal;
     unicodeRange:U+00FB-U+00FB;
}
    
rendererStyle {
     font-family: myFontFamily;
     flashType: true;
     font-weight: normal;
     color: #FF0000;
     font-size: 30pt;
}   

However, the datagridcolumn only displays the unstyled character û.
Elsewhere in my application this character, when correctly styled,
shows up as the WingDing 'handwritten cross' character as I designed it.

Where am I going wrong please?

Else where in my application I use this technique:

<mx:DataGridColumn
        width="30"
        editable="false"
        headerText=""
        dataField="problem"
        textAlign="center"
        rendererIsEditor="true"
        >
        <mx:itemRenderer>
          <mx:Component className ="rendererStyle">
              <mx:Text>
              </mx:Text>
          </mx:Component>
        </mx:itemRenderer>
</mx:DataGridColumn>    

it works fine, but the compiler complains that I've already used that
className if I want to repeat the technique elsewhere which is why I'm
trying out this new way.

Any pointers much appreciated. Thanks.