Displaying different fonts in a Spark List control in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/17/displaying-different-fonts-in-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            private function init():void {
                var fontArr:Array = Font.enumerateFonts(true); /* device fonts only */
                arrList = new ArrayList(fontArr.sortOn("fontName"));
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <s:ArrayList id="arrList" />
    </fx:Declarations>
 
    <s:List id="fontList"
            dataProvider="{arrList}"
            labelField="fontName"
            itemRenderer="skins.CustomFontItemRenderer"
            fontSize="24"
            useVirtualLayout="true"
            width="200" height="200"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/17/displaying-different-fonts-in-a-spark-list-control-in-flex-4/ -->
<s:ItemRenderer name="CustomFontItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx" 
        autoDrawBackground="true">
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
        <s:State name="normalAndShowsCaret" />
        <s:State name="hoveredAndShowsCaret" />
        <s:State name="selectedAndShowsCaret" />
    </s:states>
 
    <s:Label id="labelDisplay"
            fontFamily="{data.fontName}"
            verticalCenter="0"
            left="3" right="3" top="6" bottom="4"/>
 
</s:ItemRenderer>