You’d think embedding a font and declaring it as an Spark Application style would cascade down to all components — after all, CSS = Cascading Style Sheet, right? Well, it doesn’t. The font won’t show up in your MX components.

After bumping our heads against this about 8-9 months ago we decided to move on…I recently had to come back to it and found this helpful link that allowed me to do the following to get this working as expected.

UPDATE*: Added style for MX DataGrid.

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

@font-face
{
	src: url("/resources/fonts/Chalkboard.ttc");
	font-family: ChalkboardEmbedded;
	font-weight: normal;
	font-style: normal;
	embed-as-cff: true;
}

s|Application
{
	font-family: ChalkboardEmbedded;
	font-size: 12;
}

mx|global
{
	textFieldClass: ClassReference("mx.core.UIFTETextField");
}

mx|DataGrid
{
	defaultDataGridItemEditor: ClassReference("mx.controls.MXFTETextInput");
	defaultDataGridItemRenderer: ClassReference("mx.controls.dataGridClasses.FTEDataGridItemRenderer");
}

The class-level global style is what does the trick as it instructs all MX components using text fields to use the UIFTETextField class — it allows MX or Halo components to leverage CFF embedded fonts.

Run the app with those styles defined and you’ll notice that one component still doesn’t want to listen — the title of the Spark Panel (or at least that’s the only component I’ve run across so far that doesn’t work).

I tried defining the style for the Spark Panel specifically, but no dice. I also tried creating a new skin for the Spark Panel and set the fontFamily property of the titleDisplay to my embedded font of ChalkboardEmbedded and that also failed. Anyone else come up with a solution for this?

UPDATE*: This approach failed for the following MX classes:

• ProgressBar
• FormHeading

This approach failed for the following Spark classes:

• Panel

UPDATE*:I spoke to several Adobeans on the Flex Doc team and this is unfortunately a known issue:

This approach works for most components, but not Panel and a couple others (he identified Panel and ProgressBar in his blog). I suspect he found a bug. This whole thing about using the same embedded font in MX and Spark components was meant to be a temporary solution until Spark had parity with MX controls. A year and a half later, and there’s still no parity, so there’s no surprise that users are running into this.

Brian, I would ask him to submit a bug.

He can take a look at the spec: http://opensource.adobe.com/wiki/display/flexsdk/Font+Embedding+Reprise

That spec seems to indicate that Panel and ProgressBar should work the way it is documented.

Tweet This Post