Applying Fonts to Data Grid in Flex 4.6

To Apply custom fonts in Flex datagrid,

1. import the font in fonts folder.
2. Write a css and include the font as font face.
3. Include font family in datagrid and include the font family name.

Code snippet

font.css


/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace local "*";


@font-face
{
src:url("/../fonts/James.ttf");
fontFamily:james;
embedAsCFF: true;
}



Main MXML 


<?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/mx" minWidth="955" minHeight="600">
<fx:Style source="font.css"/>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
protected function datagrid1_clickHandler(event:MouseEvent):void
{
var obj:Object=dg.selectedItem ;
Alert.show(obj.dataField1+"");

}
]]>
</fx:Script>

<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:DataGrid x="43" y="35" requestedRowCount="4" click="datagrid1_clickHandler(event)" id="dg" fontFamily="james"  >
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="dataField1" headerText="Column 1"></s:GridColumn>
<s:GridColumn dataField="dataField2" headerText="Column 2"></s:GridColumn>
<s:GridColumn dataField="dataField3" headerText="Column 3"></s:GridColumn>
</s:ArrayList>
</s:columns>
<s:typicalItem>
<fx:Object dataField1="Sample Data" dataField2="Sample Data" dataField3="Sample Data"></fx:Object>
</s:typicalItem>
<s:ArrayList>
<fx:Object dataField1="value1" dataField2="data1" dataField3="3"></fx:Object>
<fx:Object dataField1="2" dataField2="data2" dataField3="3"></fx:Object>
<fx:Object dataField1="3" dataField2="data3" dataField3="3"></fx:Object>
<fx:Object dataField1="4" dataField2="data4" dataField3="4"></fx:Object>
</s:ArrayList>
</s:DataGrid>
</s:Application>