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

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

15 Responses to Displaying different fonts in a dropdown menu on a ComboBox control in Flex

George says:

September 23, 2008 at 9:47 am

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.

Reply
peterd says:

September 23, 2008 at 5:44 pm

George,
```
<mx:Label text="{comboBox.selectedItem.fontName}" />
```
Peter

Reply
Chris says:

October 20, 2008 at 6:53 am

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>
```
Reply

peterd says:

October 20, 2008 at 8:16 am

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"&gt;

    <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

Chris says:

October 20, 2008 at 8:50 am

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();">
```
Reply
Chris says:

October 23, 2008 at 11:25 am

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.

Reply
Chris M says:

October 28, 2008 at 9:38 am

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.

Reply
gray21 says:

March 31, 2009 at 2:38 am

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.

Reply
alfred says:

April 6, 2009 at 5:55 am

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?

Reply
gosai kishorgiri keshavgiri says:

July 26, 2009 at 7:06 am

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

Reply
- Peter deHaan says:
  
  July 26, 2009 at 1:25 pm
  
  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
  
  Reply
Oki says:

August 20, 2009 at 2:14 am

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

Reply
nidin says:

December 26, 2009 at 8:00 am

hi,
can you please give me the as3 code for flash to do the same !
thanks

Reply
Anonymous says:

February 7, 2010 at 12:10 am

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.

Reply
Anas says:

October 6, 2011 at 10:35 pm

Hi Peter

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

thanks in advance

Reply