Have you ever had that feeling that something is very wrong in your project? Maybe that some paranormal force is working against you? Well, when embedded text starts disappearing after adding a SWC to a project, that’s the feeling I used to get.

Problem:
Let me start by saying SWC’s are great. I’ve been using them more and more to include third party API’s, utilities and assets. There is one problem, embedding a font into an asset in a SWC will override the internally defined fonts in a project. Why is that bad? Well lets say you have a static text field in your SWC using Georgia and a TextField instance in your Flex project using Georgia. No text will show up in your Flex TextField. Check out this example (notice it starts invisible):

SWC Text Embed Conflict:

(switch between MyGeorgia and Georgia fonts to see the disappearing text)

Full source code can be found here.

Solution:
Define your embed tags in ActionScript with a different fontFamily and fontName. So, if your font is Georgia than name it EmbedGeorgia. This will allow your TextField to reference the correct class definition. In my experience the SWC will always win if there is a conflict.

[Embed(source="/assets/fonts/georgia.ttf", advancedAntiAliasing="true", fontFamily="MyGeorgia", 
	fontName="MyGeorgia", fontWeight="normal", mimeType="application/x-font" )]
private var MyGeorgiaFont:Class;
public static const MY_GEORGIA:String = "MyGeorgia";

rather than…

// This will conflict with Georgia references in a SWC!!!
[Embed(source="/assets/fonts/georgia.ttf", advancedAntiAliasing="true", fontFamily="Georgia", 
	fontName="Georgia", fontWeight="normal", mimeType="application/x-font" )]
private var GeorgiaFont:Class;
public static const GEORGIA:String = "Georgia";

It’s that easy?
Yup.

What if you have two SWC’s with Georgia embedded text?
Will they conflict with each other? Based on the example above the answer is no. Awesome!

What if my fonts are stored in a SWF file?
Than duplicate the above code but reference your SWF instead of the font in the assets folder.

Code that results in invisible text:

// This will conflict with Georgia references in a SWC!!!
[Embed(source="/assets/fonts/georgia.ttf", advancedAntiAliasing="true", fontFamily="Georgia", 
	fontName="Georgia", fontWeight="normal", mimeType="application/x-font" )]
private var GeorgiaFont:Class;
public static const GEORGIA:String = "Georgia";

private var georgiaFormat:TextFormat;
private var georgiaText:TextField;

public function ConflictingFonts()
{
	// Component from SWC which uses Georgia in a static text field
	var cc:ColorComponent = new ColorComponent();
	cc.colorPicker.addEventListener(ColorPickerEvent.CHANGE, selectColor, false, 0, true);
	cc.y = 30;
	this.addChild(cc);
	
	// Create the local TextFormat
	georgiaFormat = new TextFormat(GEORGIA, 18);
	
	// Create the local TextField (the text won't show up!)
	georgiaText = new TextField();
	georgiaText.embedFonts = true;
	georgiaText.width = 300;
	georgiaText.height = 20;
	georgiaText.defaultTextFormat = georgiaFormat;
	georgiaText.setTextFormat(georgiaFormat);
	georgiaText.text = "Hello World";
	this.addChild(georgiaText);
}

Swap out the Embed tag, update the TextFormat and you will be good to go.

Rant:

On the way to this solution I came up with a number of hacks that appeared to work only to break at the worst time. These hacks included storing a second reference of the font in the SWC (assuming you have access to the source), enumerating through the font list at runtime (which only fixes the problem in debug), and breaking apart the text into bitmaps (you don’t want to know how long that takes). Rather than stop using SWC’s I started to create more and more of them pushing towards an acceptable solution. This is what I ended up on. Hopefully it will save everyone some time and a little sanity 😉