MX and Spark Font Embedding, Fun for the whole Family!

Oh joyous Flex. Spark was a great addition to MX components. Much more flexible and extensible as well as many more skinning options. However I ran into an issue where some fonts were not liked by one side or the other. Gotta love family members that bicker...

If you see a "warning incompatible embedded font" error, a trick that I came up with was to embed the font twice. Efficient? Not entirely, but saves from having to load another font after it launches. Here is an example from the CSS that shows the embedding and setting for Spark and MX components. It works pretty well and you can specify any font you wish.

@font-face {

src: url("assets/fonts/arial.ttf");

fontFamily: ArialSpark;

fontStyle: Normal;

fontWeight: Normal;

advancedAntiAliasing: true;

embed-as-cff:true;

}

@font-face {

src: url("assets/fonts/arial.ttf");

fontFamily: Arial;

fontStyle: Normal;

fontWeight: Normal;

advancedAntiAliasing: true;

embed-as-cff:false;

}

mx|Label {

fontFamily: Arial;

}

s|Label {

fontFamily: ArialSpark;

}

Same font file just embedded two different ways for the different components. This will be great for a system wide default font for an application. It will work for multiple fonts and components as well.