Fonts in Runtime CSS compiled as SWF do not render with setFormatOfRange() but works with setStyle()

Question

Im having a requirement to load fonts at runtime and display them in a  RichEditableText, The text in the RichEditableText could have multiple  formats so I use the RichEditableText's setFormatOfRange() method to set  the font.
I use a CSS compiled as a SWF to load the fonts, Fonts render when the font is set via the -setStyle() method as demonstrated in the code below
Im using Flash Builder 4 with SDK version 4 to compile the app(Using the default Spark Theme).
Below is the CSS file (fontCSS.css)- You might need to copy fonts from the Widows Font folder for this in a fodler named fonts,
/* CSS file fontCSS.css*/
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@font-face{
    src: url("fonts/Articulate.TTF");
    fontFamily: "Articulate123";
    embedAsCFF: true;
@font-face{
    src: url("fonts/AGENCYB.TTF");
    fontFamily: "Agency123";
    embedAsCFF: true;
Right Click on the CSS file, in Flash Builder 4 and select "Compile CSS to SWF".
Run the MXML application below and you should see the issue Im trying to describe.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               creationComplete="application1_creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import flash.utils.describeType;
            import flashx.textLayout.formats.TextLayoutFormat;
            import mx.collections.ArrayCollection;
            import mx.events.CalendarLayoutChangeEvent;
            import mx.events.FlexEvent;
            import mx.events.StyleEvent;
            import spark.events.IndexChangeEvent;
            private var swfLoader:Loader
            protected function application1_creationCompleteHandler(event:FlexEvent):void
                var cssEventDispatcher:IEventDispatcher=styleManager.loadStyleDeclarations("fontCSS.swf")
                cssEventDispatcher.addEventListener(StyleEvent.COMPLETE, onComplete);
            private function onComplete(event:Object):void
                fontList.dataProvider=new ArrayCollection(Font.enumerateFonts())
            protected function fontList_changeHandler(event:IndexChangeEvent):void
                var tlformat:TextLayoutFormat=new TextLayoutFormat()
                tlformat.fontFamily=fontList.selectedItem.fontName
                textEditor.setFormatOfRange(tlformat,0,5)
        ]]>
    </fx:Script>
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <s:Label text="Please select a font from the list below"/>
    <s:List id="fontList" change="fontList_changeHandler(event)">
    </s:List>
    <s:RichEditableText id="textEditor2"
                        fontSize="30"
                        fontFamily="{fontList.selectedItem.fontName}"    >
        <s:p>Hello -  fontFamily set via css binding</s:p>
    </s:RichEditableText>
    <s:RichEditableText id="textEditor"
                        fontSize="30"
                        >
        <s:p>Hello - fontFamily set via setFormatOfRange()</s:p>
    </s:RichEditableText>
</s:Application>
tried to use an external SWF with the fonts compiled in them Via AS3, that too dosent seem to work, The setStyle() also refuse the work with the below SWF
here is the AS3 project code for your reference
FontEmbedder.as
package
    import flash.display.Sprite;
    import flash.system.Security;
    import flash.text.Font;
    public class FontEmbedder extends Sprite
        public function FontEmbedder()
            Security.allowDomain("*")
        [Embed(source="/fonts/Articulate.TTF", fontName="Articulate123", embedAsCFF="true")] 
        public var articulateFont:Class;
        [Embed(source="/fonts/AGENCYB.TTF", fontName="Agency123", embedAsCFF="true")] 
        public var agencyFont:Class;
We ve been wrecking our heads off to figure out a solution for this. Ultimately decided to post a question here.
Your feedback will be highly appreciated.
Below are  snapshots of how the 2 fonts are rendered
Regards.

Answer 1

Hi Alex,
I did read through your blog the other day, This must have been thepost you were referring to,
http://blogs.adobe.com/aharui/2010/03/flex_and_embedded_fonts.html
The post is explanatory, but how would we implement this successfully wth code?
A working AS3 code example of your explanation would be more than helpful.
Regards