Displaying different fonts in a dropdown menu on a ComboBox control in Flex

The following example shows how you can set different fonts for different items in a Flex ComboBox control’s dropdown menu by using a custom item renderer.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/31/displaying-different-fonts-in-a-dropdown-menu-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:ArrayCollection id="arrColl"
            source="{Font.enumerateFonts(true)}">
        <mx:sort>
            <mx:Sort>
                <mx:fields>
                    <mx:SortField name="fontName" />
                </mx:fields>
            </mx:Sort>
        </mx:sort>
    </mx:ArrayCollection>

    <mx:ComboBox id="comboBox"
            dataProvider="{arrColl}"
            labelField="fontName"
            fontSize="14"
            open="comboBox.dropdown.variableRowHeight = true;">
        <mx:itemRenderer>
            <mx:Component>
                <mx:Label fontFamily="{data.fontName}"
                        toolTip="{data.fontName}" />
            </mx:Component>
        </mx:itemRenderer>
    </mx:ComboBox>

</mx:Application>

View source is enabled in the following example.

For an example of doing this in the Flex 4 SDK, see “Displaying different fonts in a Spark List control in Flex 4”.

15 thoughts on “Displaying different fonts in a dropdown menu on a ComboBox control in Flex

  1. I cannot seem to figure out how to pull the selected font to a textbox so I can see what is selected. I have tried all kinds of things:
    {myFont.labelField}
    {myFont.selectedItem.label}

    The comboBox id is myFont

    Any insight would be great

    Thanks
    G.

  2. Love the site, lots of good nuggets.

    Building upon this topic, any ideas how to add an embedded font to a Rich Text Editor? Not just assign the embedded font, but append multiple to the RTE. I’ve always been able to push a fontName to the fontFamilyArray, but the font never renders in the RTE, I always get a default font to render.

    Example:

    <mx:Style>
        @font-face {
            src:url("AABIGFICTION.swf");
            fontFamily: "AABIGFICTION";
        }
    </mx:Style>
    
    <mx:Script>
        RTE.fontFamilyArray.push('AABIGFICTION');
    </mx:Script>
    
    <mx:RichTextEditor fontAntiAliasType="advanced" x="134" y="21" id="RTE" title="Title" width="440" height="368" enabled="true"></:RichTextEditor>
    
  3. Chris,

    I don’t believe you can mix embedded fonts and non-embedded fonts in a text field (but of course, I could be wrong). I did a quick test and it seems my text was disappearing after selecting some text and changing the font family.

    That said, if I only use embedded fonts in the RichTextEditor, then this code seems to work:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
        <mx:Style>
            @font-face {
                src: local("Verdana");
                fontFamily: "VerdanaEmbedded";
            }
            @font-face {
                src: local("Arial");
                fontFamily: "ArialEmbedded";
            }
            @font-face {
                src: local("Comic Sans MS");
                fontFamily: "ComicSansMSEmbedded";
            }
        </mx:Style>
    
        <mx:Script>
            <![CDATA[
                private function init():void {
                    richTextEditor.fontFamilyArray = ["VerdanaEmbedded", "ArialEmbedded", "ComicSansMSEmbedded"];
                }
            ]]>
        </mx:Script>
    
        <mx:RichTextEditor id="richTextEditor"
                creationComplete="init();" />
    
    </mx:Application>
    

    Of course, since the RichTextEditor control allows users to change the text to bold or italic (or both), you’d want to embed the regular font face as well as the combination of bold, italic, and bold+italic font faces (so embed four font faces per font family).

    Hope that helps,

    Peter

  4. Peter,

    You are right, you cant’ mix device and embedded fonts in a text field. If I embed a device font like you did in your example, I get the same result, it works perfectly.

    But, if I use a compiled swf containing a whole fontfamily, or embed a true type or open type font, I can’t get the fonts to render right. I can assign a font like in the example below, but if I try to utilize the fontfamilyarray, you get a default font rendering. The underlying html though, shows the correct font selection, the rendering in the RTE only doesn’t show the right font.

    I can get a font (AABIGFICTION) to work like this:

    <mx:Style>
    	@font-face {
    		src:url("AABIGFICTION.swf");
    		fontFamily: "AABIGFICTION";
    		}
    		@font-face {
    		src:url("Baskerville_Old_Face.swf");
    		fontFamily: "Baskerville_Old_Face";
    		}
    
    </mx:Style>
    
    <mx:Script>
    <![CDATA[
    private function returnHandler():void {
    
    RTE.fontFamilyArray = ["AABIGFICTION", "Baskerville_Old_Face"];
    }
    	]]>
    </mx:Script>
    
    <mx:RichTextEditor id="RTE" title="Title" width="440" fontFamily="AABIGFICTION" height="368" creationComplete="returnHandler();">
    
  5. I just figured this one out. Make sure that if you embed a font, that every font used by the movie is embedded. Because if flex tries to use a font that is not embedded, Flex will automatically switch to using system fonts. IT WILL IGNORE YOUR EMBEDDED FONTS.

    In my project, I was embedding 2 non-system fonts. The Rich Text editor by default uses Verdana to display your text size, font, all the control components that belong to the Rich Text Editor… And since I didn’t embed Verdana, Flex ignored my embedded fonts, and forced the movie to use Verdana. After I embedded the system font (Verdana) everything worked as expected.

  6. do you know how to get a combo box in a rich text editor to do this. Trying to do it in AS3 not MXML.

  7. Hi,
    I would like to know how to create a ComboBox which contains and displays many embedded fonts in a dropdown menu with MXML ?

    Thanks for you help.

  8. My local machine available of some unicode font in chinese character. Once i try with this application inside the drop down list found that unicode font is render inproper appear as “???????”. Any way to resolve this?

  9. dear sir
    i have found code for fomt-family dropdown menu and you give this code in your website that i cant understand in which format should i save it doesn’t run save as html mhtml mxml actually i want to use them in my web page but i cant use it so please kindly tel me what type of file should i create with your code

    1. gosai kishorgiri keshavgiri,

      Here’s a quick “how to”:
      1) Create a new Flex Project in Flex Builder 3.
      2) Copy the code from the post into your new Flex project’s default .MXML file.
      3) Run the project from Flex Builder and verify it works.
      4) Select Project > Export Release Build from the Flex Builder main menu. This will export all the files to some .HTML, .JS, and a .SWF files.
      5) Upload the files from the Flex Project’s /bin-release/ to your website.
      6) View the .HTML file on your website.

      Peter

  10. That’s great code, but I am wondering and is there a way to achieve same effect with flash cs3 combobox control and actionscript 3

  11. Hi,
    I have tried this code, but it run incorrectly on flash 10. Weddings, Winding and some simsun-PUA is display incorrectly.
    Can you help me to figure out what ‘s wrong with it.
    Here ‘s quick “how to”:
    1) 1) Create a new Flex Project in Flex Builder 3.
    2) Copy the code from the post into your new Flex project’s default .MXML file.
    3) Open your project properties. On the Flex Compiler, input “10.0.10” for the item “Require Flash Player version” to specify the flash version
    3) Run the project from Flex Builder and verify it works.

  12. Hi Peter

    My question is i only want to show some specific embedded fonts in the dropdownlist not the system fonts

    thanks in advance

Comments are closed.