s|global && mx|global embedded fonts

I’m not sure how it happened, but yesterday we noticed our fonts were suddenly (magically) messed up. In one of our applications we reference a library source path containing a common css file and some fonts. In it we were embedding the fonts appropriately and had global style declarations so the embedded fonts would be applied to both sets of controls.

As an example:

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";

@font-face {
	src: url("Arial.ttf");
	font-weight: normal;
	font-style: normal;
	fontFamily: "embededArialSpark";
}

@font-face {
	src: url("Arial.ttf");
	font-weight: normal;
	font-style: normal;
	fontFamily: "embededArialHalo";
	embedAsCFF: false;
}

mx|global
{
/*  This worked and appeared NOT to affect spark controls  */
/*	fontFamily: embededArialHalo;  */
/*	font-family: "embededArialHalo";*/
	font-family: embededArialHalo;
}
s|global
{
/*	Worked, but appeared to apply to MX controls as well, that is, you don't see the mx fonts  */
/*	fontFamily: embededArialSpark;  */
/*	font-family: "embededArialSpark";*/
	font-family: embededArialSpark;
}

However, in another base library we had another css file with the same fonts using almost the same declarations. It just so happened that we remade those sets of components and replaced that section of the library. We noticed that we had the same embedded fonts and decided to remove them since we had a newer common css in an assets library, but when we removed it our fonts were messed up. We tried editing our common css to do what was previously in the other library and still had no affect on the fonts.

So I created a sample app demonstrating the problem. You can download the source here.

As a workaround, use the global selector for sparks, and mx|ComboBox and other typed selectors for the halo components that you are using.