Embedded fonts with rich editable text

Question

Hi, I am trying to use my embedded fonts in rich editable text field, but it only works for users that already have that font installed on their system.
This is what I do.
I embed fonts like this:
     @font-face {
            src:url("fonts/Cantarell-Regular.ttf");
            fontFamily: Cantarell;
            advancedAntiAliasing: true;
        @font-face {
            src:url("fonts/Cantarell-Bold.ttf");
            fontFamily: Cantarell;
            fontWeight: bold;
            advancedAntiAliasing: true;
Then in my DropDownList (id=fontPicker) I add a new string entry that references my new font (in this case "Cantarell")
I have a custom item renderer which makes sure to print out the name of the font using the font itself, so that for example font name "Cantarell" will be printed out using Cantarell font. Code in my custom font item renderer looks like this:
<s:Label id="labelDisplay"
             fontFamily="{data}"
             verticalCenter="0"
             left="3" right="3" top="6" bottom="4"/>
And this part works, even if you dont have the font installed on your system, the name of the font is displayed propperly.
The thing that I want to do is to select some text in my rich editable text field and change the font of the selected text depending on what user selected from the dropdownlist. I added an event which is called once user selects new font type, and it performs following code on the selection in rich editable text:
               if(fontPicker.selectedIndex == -1){
                    //user did not select anything, we do not change the font
                    text.setFocus();
                    return;
               //we get the text layout format of the selected text
                var txtLayFmt:TextLayoutFormat = text.getFormatOfRange(null,text.selectionAnchorPosition,text.selectionActivePosition);
               //we change fontFamily of the selected text to the font that we just picked
                txtLayFmt.fontFamily = fontPicker.selectedItem;
                // I even tryed to add those two following lines without much help
                //txtLayFmt.fontLookup = FontLookup.EMBEDDED_CFF;
                //txtLayFmt.renderingMode = RenderingMode.CFF;
               // we update our selected text with new font
                text.setFormatOfRange(txtLayFmt,text.selectionAnchorPosition,text.selectionActivePosition );
                text.setFocus();
This code works perfect if user has the font installed on their system but it does not work if they dont have the font even if I embed the font.
What I am doing wrong, any suggestions, tips, links?
Thanks,
Dal

Answer 1

Thanks I will take a look at your blogs, maybe I find some explanations.
Once it comes to my problem, I found a solution, I just needed to add a simple style:
        .mystyle1 {
             fontFamily:Cantarell;
and set the styleName of my text to it:
text.styleName = "mystyle1";
Afterwards I can dynamically change fonts and sizes of the text selections in my rich editable text field as much as I like.
Also I need to make sure that I set embed-as-cff: true;
      @font-face {
            src:url("fonts/Cantarell-Bold.ttf");
            fontFamily: Cantarell;
            fontWeight: bold;
            advancedAntiAliasing: true;
            embed-as-cff: true;
I hope this helps someone.
And if anyone has explanation to why embedded fonts work only after I change styleName of a text to a random style, please share with me.
Cheers,
Dal.