Semi-bold fonts in Flex

Recently, I had a customer who was having problems applying semi-bold fonts in flex. And the reason behind his problem was very interesting and I thought I’d share an example for flex-ers out there trying to do the same.

Goal: Modify MyriadPro font to MyriadPro-semibold for use in a flex application, using CSS and otf font file.

Background: The primary issue here is that ’semibold’ font is not something that is recognized by the flash player transcoder. This requires us to modify the font first to get it past the transcoder and then use the otf file to pull out the font.

Solution: Firstly, create a new fontFamily (make sure the name is unique to this semi-bold font). In my example, I have rename the fontFamily for semi-bold which creates a new font family and does not come under ‘MyriadPro’ fontFamily anymore .

The next step is to get past the flash player transcoder. In order to achieve this, in my example I added ‘bold’ as fontWeight. This will allow the font to get past the transcoder because ’semibold’ is not a recognised fontWeight.

The final step is the definition for this font, namely sbFont in my example. Note how I use the fontFamily name that I exclusively created for this semibold font and added fontWeight.

Why this works: When the above is put together, what happens is that the font gets past the transcoder and then gets the ’semibold’ font from the otf font file. The result is a ’semi-bold’ font for MyriadPro.

Example:

[ This is in the CSS file; Please make sure that you spell the otf font file names precisely when specifying the src url for the font]

@font-face {

fontFamily: MyriadPro;

fontWeight: normal;

fontStyle: normal;

src: url(“MyriadPro-Regular.otf”);   }

@font-face {

fontFamily: MyriadPro;

fontWeight: bold;

fontStyle: normal;

src: url(“MyriadPro-Bold.otf”);   }

@font-face {

fontFamily: MyriadPro-semibold;

fontWeight: bold;

src: url(“MyriadPro-Semibold.otf”);   }

//Normal Font Definition

.nFont{fontFamily: “MyriadPro”; fontWeight: normal; fontSize: 16; color: #333333;}

//Bold Font Definition

.bFont{fontFamily: “MyriadPro”; fontWeight: bold; fontSize: 16; color: #333333;}

//Semi-bold Font Definition

.sbFont{fontFamily: “MyriadPro-semibold”; fontWeight: bold; fontSize: 16; color: #333333;}