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.

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();">

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

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>

<mx:Label text="{comboBox.selectedItem.fontName}" />

Peter

The comboBox id is myFont

Any insight would be great

Thanks
G.