I found an interesting trick with embedding fonts today while working with the Text Flow engine in Flex 4.  What I found out is that you can embed multiple fonts under the same font family name, but set the properties such as font weight or font style to different settings based on the font source you are using.  This may be an obvious thing to a lot of people, and the property name 'font-family' makes a lot more sense now, but for me it was a real 'ah-ha' moment.  By the way, this isn't just a Flex 4 thing, you can do this with Flex 3 and probably AS3 only projects (haven't tried that yet) but the issue became more apparent in Flex 4's new TLF enabled components.

The problem came about because we have a set of fonts that provide each style type in a unique OTF file, i.e. Font-Regular.otf, Font-Bold.otf, Font-Italic.otf, and Font-BoldItalic.otf.  In the past, we just embedded this with unique font-family ids (font-family: "Font-Regular") and then just bound them via CSS.  This approach becomes a significant problem when starting to work with TLF's selection management and Text Format.  We are building a simple Rich Text Editor in Flex 4 (since its not available yet in Beta 2) to allow a user to set their text to bold, italic or underline.  Simple enough, right?

Well, its not so simple when you have your font styles spread across font identifiers. The way we started to handle this is that when the user selected some text and applied Bold, we would set the text format's font family for the selection to "Font-Bold". To enable the ability to toggle the style, we would ask for the selection ranges format, look to see what the font family is and then toggle it to either bold or normal.  Now, let's say that the user selects a section of text that mixes bold and normal text.  When you get the text format back, the font family property is set to undefined, letting you know that you have a mixed set.

In the bold/normal case this is easy to solve, but let's say that you have bold, normal and italic text in the selection.  Because the property is undefined we can't determine this nor can we just apply the new style across the entire selection because you would remove the italic (in the case of applying bold).  At this point I was getting kind of upset because the solution wasn't sounding pretty.  We were looking at having to loop through the selection, grabbing the leafs and then looking at the format to determine the correct selection.  I was going to punt on it as a bug for now and move on.

This morning, while making coffee I thought about the fact that the key for the CSS font embed is font-family, and that when using @font-face that you can actually set things such as font-weight.  What I found out is that you can embed different sources under the same name as long as they have different style properties:

@font-face {

    src: url("./assets/fonts/Font-Regular.otf");

    font-family: MyFont;

}

@font-face {

    src: url("./assets/fonts/Font-Bold.otf");

    font-family: MyFont;

    font-weight: bold;

}

@font-face {

    src: url("./assets/fonts/Clean UI/Font-Italic.otf");

    font-family: MyFont;

    font-style: italic;

}

@font-face {

    src: url("./assets/fonts/Font-BoldItalic.otf");

    font-family: MyFont;

    font-weight: bold;

    font-style: italic;

}

Now I can treat the font as the same family and then toggle the style properties, such as font-weight or font-style without having any font conflict.  This fixes the Text Format issue and also allows for a much cleaner/consistent CSS file.  I am sure this is explained somewhere (probably in the documents, clear as day), but I never knew that you could do this... hope it helps!