Flex 4 Font Embedding

A quick post for those having trouble with embedded fonts rendering in Flex 4. Turns out you need to have the “embedAsCFF” property set appropriately in the “@font-face” selector depending on whether the component you want to change the font of is a Halo (mx:) or a Spark (s:) component. For example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/* For a Halo component set the embedAsCFF:false */
@font-face 
{
    src: url(“assets/fonts/verdana.TTF”);
    fontFamily: myHaloFont;
    advancedAntiAliasing: true;
    embedAsCFF: false;
}
 
/* For a Spark component set the embedAsCFF:true */
@font-face 
{
    src: url(“assets/fonts/verdana.TTF”);
    fontFamily: mySparkFont;
    advancedAntiAliasing: true;
    embedAsCFF: true;
}
 
s|Button
{
    fontFamily: mySparkFont;
}
 
mx|Button
{
    fontFamily: myHaloFont;
}

Thanks to AV’s Weblog for help with this. During my search I also found something over at Things That Work with regards to problems with embedded fonts and cross-platform font rendering. I have a feeling I might need to keep that post bookmarked…