The fonts style list as we see in MS word, excel etc, shows the list of fonts name with that respective font Style, which gives the pre-look to the user when applied it to the text. In flex we don’t have such ComboBox which displays the Fonts List with respective Font Styles. So i caught this point at developed a FontStyleList component.
The FontStyleList component extends the Flex ComboBox component, which uses Font.enumerateFonts(true) method of the class flash.text.Font to get the array list of available Device Fonts. So there is no need to assign the DataProvider to this component, component does it itself. Once it gets the Fonts list, it uses a Itemrenderer to display respective font name with respective font style in ascending sort order. To use the component you must use two *.as files;

• FontStyleList - is component file.
• FontStyleRenderer - is ItemRenderer which is used by the component.

Usage Sample:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:com="com.*">
      <com:FontStyleList/>
</mx:Application>

Here is component Source Code : (FontStyleList.as)

package com
{
	import flash.text.Font;

	import mx.collections.ArrayCollection;
	import mx.collections.Sort;
	import mx.collections.SortField;
	import mx.controls.ComboBox;
	import mx.core.ClassFactory;
	import mx.events.DropdownEvent;
	import mx.events.FlexEvent;

	public class FontStyleList extends ComboBox
	{	

		private var fontList:ArrayCollection;

		public function FontStyleList()
		{
			super();
			addEventListener(FlexEvent.CREATION_COMPLETE, listCreated);

		}
		private function listCreated(e:FlexEvent):void{
			fontList = new ArrayCollection(Font.enumerateFonts(true));
			labelField = "fontName";
			setStyle("fontSize",15);
			var fontSort:Sort = new Sort();
			fontSort.fields = [new SortField("fontName")];
			fontList.sort = fontSort;
			dataProvider = fontList;
			itemRenderer = new ClassFactory(FontStyleRenderer);
			dropdown.variableRowHeight = true;
		}
	}
}

You can see that the component is using a ItemRenderer – FontStyleRenderer.as
Here is the source:

package com
{
	import mx.controls.Label;
	import mx.events.FlexEvent;

	public class FontStyleRenderer extends Label
	{
		public function FontStyleRenderer()
		{
			super();
		}
		override public function set data(value:Object):void{
			super.data = value;
			setStyle("fontFamily",value.fontName);
			text = value.fontName;
			dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
		}
	}
}

The Trick here is getting the font list form the method Font.enumerateFonts(true) from the class flash.text.Font