Flex Examples

The following example shows how you can use the static Font.enumerateFonts() method in Flex to determine which fonts are installed on a user’s system. The enumerateFonts() method returns an array of Font objects (see the flash.text.Font for more information)

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/10/finding-out-which-fonts-are-installed-on-a-users-system/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">

    <mx:Script>
        <![CDATA[
            import flash.text.Font;

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

    <mx:Array id="arr" />
    <mx:String id="str">The quick brown fox jumped over the lazy dog.</mx:String>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="String:" />
        <mx:TextInput id="textInput" text="{str}" />

        <mx:Spacer width="100%" />

        <mx:Label text="Number of installed fonts: {arr.length}" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid" dataProvider="{arr}">
        <mx:columns>
            <mx:DataGridColumn dataField="fontName"
                    width="200"
                    itemRenderer="mx.controls.Label" />
            <mx:DataGridColumn dataField="fontStyle" />
            <mx:DataGridColumn dataField="fontType" />
        </mx:columns>
    </mx:DataGrid>

    <mx:Label id="lbl"
            text="{textInput.text}"
            width="{dataGrid.width}"
            height="32"
            fontFamily="{dataGrid.selectedItem.fontName}"
            fontSize="16" />

</mx:Application>

View source is enabled in the following example.

Note that in the previous example, we passed a value of true to the enumerateFonts() method. The enumerateFonts() method takes a single Boolean parameter, enumerateDeviceFonts (default value is false), which controls whether both device and embedded fonts are returned (true) or whether just embedded fonts are returned (false).

If you modified the previous example and embedded a font using the following code, you would see that an additional font “Base02″ appears in the data grid:

<mx:Style>
    @font-face{
        src: url("./fonts/base02.ttf");
        fontFamily: "Base02";
    }
</mx:Style>

Also, if you modified the <mx:Script /> tag and passed false to the enumerateFonts() method, only one item would be displayed in the data grid (fontName:”Base02″, fontStyle:”regular”, fontType:”embedded”):

<mx:Script>
    <![CDATA[
        import flash.text.Font;

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