Flex: embedded fonts not being applied correctly in Label and DataGrid

Question

Folks, I am observing a problem with how an embedded font is applied to certain Flex components, namely mx:Label and mx:DataGrid. I have a CSS that declares three variations on an embedded font as follows:

@font-face { src:url("buttons.swf"); font-family: "Arial"; }

@font-face { src:url("buttons.swf"); font-family: "Arial"; font-weight: bold; }

@font-face { src:url("buttons.swf"); font-family: "Arial"; font-style: italic; }

And in the style declaration for Label and DataGrid, I have:

Label { fontFamily: "Arial"; fontSize: 11; fontFamily: LucidaSans; }

and

DataGrid { fontFamily: "Arial"; height: 16; }

(I've snipped some stuff from both style rules, so if you think there's something that may be causing a conflict I can certainly post the entire definition. It's mostly color, line and padding stuff for the DataGrid.)

The problem that is for both Label and cells in the DataGrid the text is being rendered as sort of a times new roman font. The headers in the DataGrid are fine, just the text in the cells is wonky. All other components use the correct font as defined in the CSS/SWF.

Any ideas why this is happening?

Answer 1

Kudos to Zed-K above. Simple.