Embedded font looks different than supposed to

Question

When an embedded font is used for a label it looks correct, but when the same font is used for a combobox, the selected item font looks different from the dropdown and label font.

@font-face
{
    src:url("/assets/fonts/Helvetica.TTF");
    fontFamily: "Helvetica Neue Bold Condensed";
    fontStyle:   normal;
    fontWeight: normal;
}

.comboBox
{
    fontFamily: "Helvetica Neue Bold Condensed"; 
    fontSize:   11;
    color:     #666666;
}

.label
{
    fontFamily: "Helvetica Neue Bold Condensed";
    fontSize:   12;
    color:     #CCCCCC; 
}

Why would these look different (besides the size and color)?

Answer 1

You are embedding a font and specifying that it should be used whenever the fontWeight is normal. This is what the fontWeight: normal style means.

However, the labels in combo boxes are bold by default (this is done by the Flex framework), so they will not use the embedded font.

To fix: Either create another copy of your @font-face declaration and make that one fontWeight: bold, or specify fontWeight: normal on your .comboBox rule.