Using embedded fonts in a Flex DataGrid control

The following example shows how you can use embedded fonts with the DataGrid control in Flex.

Note that the DataGridColumn’s use a bold font by default, so you’ll either need to either embed both a normal and bold font weight, or else set the DataGrid control’s column font weight to normal.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/12/using-embedded-fonts-in-a-flex-datagrid-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Verdana");
            fontFamily: VerdanaEmbedded;
        }

        @font-face {
            src: local("Verdana");
            fontFamily: VerdanaEmbedded;
            fontWeight: bold;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private var fontArr:Array;

            private function init():void {
                fontArr = Font.enumerateFonts(true);
                fontArr.sortOn("fontName", Array.CASEINSENSITIVE);
                dataGrid.dataProvider = fontArr;
            }
        ]]>
    </mx:Script>

    <mx:DataGrid id="dataGrid"
            fontFamily="VerdanaEmbedded"
            width="300"
            rowCount="10"
            creationComplete="init();"
            rotation="10">
        <mx:columns>
            <mx:DataGridColumn dataField="fontName"
                    headerText="fontName:" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

Alternately, you could just install the normal font face, and set a custom headerStyleName, as shown below:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/12/using-embedded-fonts-in-a-flex-datagrid-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Verdana");
            fontFamily: VerdanaEmbedded;
        }

        .myHeaderStyleName {
            fontWeight: normal;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private var fontArr:Array;

            private function init():void {
                fontArr = Font.enumerateFonts(true);
                fontArr.sortOn("fontName", Array.CASEINSENSITIVE);
                dataGrid.dataProvider = fontArr;
            }
        ]]>
    </mx:Script>

    <mx:DataGrid id="dataGrid"
            fontFamily="VerdanaEmbedded"
            headerStyleName="myHeaderStyleName"
            width="300"
            rowCount="10"
            creationComplete="init();"
            rotation="10">
        <mx:columns>
            <mx:DataGridColumn dataField="fontName"
                    headerText="fontName:" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

Tagged as: @font face, fontFamily