Flex font issue in ToggleButtonBar

When you are styling Flex components, fixing font issues can be one of the most frustrating and time-consuming tasks. A classic example is changing the ToggleButtonBar component font.  Conventional wisdom would tell you to write a little CSS:

ToggleButtonBar
{
fontFamily: "Knowledge Black";
fontSize: 12;
}

However, this yields some funky looking text:

The reason is because the ToggleButtonBar has a default button style which tells the font to be bold. The “Knowledge Black” font does not have a “bold” fontStyle (because it’s already bold!). To fix the problem, you need to override the default button style:

ToggleButtonBar
{
fontFamily: "Knowledge Black";
fontSize: 12;
buttonStyleName:myStyle;
}
 
.myStyle
{
fontWeight:normal;
}

This turns of the bold font and will leave you with what you’d expect:

Comments are closed.