Using device fonts and embedded fonts (FontAwesome) in the same TextField

Question

I have a TextField of type "input" and I want users to type in with "Arial" and insert "FontAwesome 5" icons. The users would be inserting icons through the software. However to get the Icons to work I need to embed the FontAwesome 5 Icons

I do that using

[Embed(source="../assets/Font Awesome 5 Free-Solid-900.otf", fontName="Font Awesome 5 Free Solid", mimeType="application/x-font-opentype", embedAsCFF="false", unicodeRange="U+F000-F8FF")]
        private var asset:Class;
    

then in my code i register the font and enable embedded fonts for the text field.

        Font.registerFont(asset);
            var tf:TextField = new TextField();
            tf.embedFonts = true;
            tf.type = "input";
            tf.mouseEnabled = true;
            tf.defaultTextFormat = new TextFormat("Arial", 30, 0x000000, false, false, false, "", "", "left", 5, 5, 0, 0);
            tf.selectable = true;


        tf.appendText("Hello World!");
        
        
        var format:TextFormat = new TextFormat();
        format.font = "Font Awesome 5 Free Solid";
        format.size = 30;
        format.color = 0xFF0000;
        tf.appendText(String.fromCharCode(0xf598));
        tf.setTextFormat(format, tf.length - 1, tf.length);
        

However, I set the defaultTextFormat as "Arial" since I want the users to type in regular script. I then append some text that should be formatted as Arial and after that set the FontAwesome format and then insert a unicode character in the TextField.

However I am unable to see the text that was formatted as "Arial" I can only see the FontAwesome Icon.

Any ideas as to whats going wrong here would be appreciated.

Answer 1

You can use either device fonts or embedded fonts within a single TextField, not both at the same time. This is controlled by the TextField.embedFonts property.