In Adobe Flex, why does an embedded version of a font, behave differently from the same font installed in the system.

Question

Scenario:

Flex application utilizing an @font-face declaration for embedding the font. (Embedded fonts are required to be able to rotate text.)

The application was originally developed as an English application, but during localization it became necessary to locate a unicode font capable of displaying Asian characters. The original implementation of the application uses four fonts to satisfy the various permutations of character emphasis. Bold, Bold Italic, Italic and Normal are all supplied through the corresponding Arial fonts in the Arial family.

Problem:

When trying to compile in the font as one that could be used for the bold, italic, and bold italic through something like (yes its not ideal, this was just a test to see if it could be done):

@font-face { src:url("/fonts/ArialUnicode.ttf"); 
             fontFamily: myFamily;
             fontWeight: normal;
             fontStyle: normal;
             advancedAntiAliasing: true; }

@font-face { src:url("/fonts/ArialUnicode.ttf"); 
             fontFamily: myFamily;
             fontWeight: bold;
             fontStyle: normal;
             advancedAntiAliasing: true; }

etc.

The problem is that when compiling the application Flex gets cranky and gives the following error message:

[ERROR] /dirpath/Style.css:[49,-1] exception during transcoding: Font for alias 'myFont' with italic style was not found at: file:/dirpath/fonts/ArialUnicode.ttf

So with some investigation it was determined that since Unicode supports neither Italics nor Bold, that when the Flex compiler attempts to embed the font, it gets unhappy as it cannot locate a font at the specified location that will satisfy the css requirement.

Now when the font-face declaration is taken back to its simplest form of:

@font-face { src:url("/fonts/ArialUnicode.ttf"); 
             fontFamily: myFamily;
             fontWeight: normal;
             fontStyle: normal;
             advancedAntiAliasing: true; }

everything compiles fine and the application displays all normal weight, normal style Asian characters fine. However when displaying things that are to be displayed in Bold or Italic in the style sheet, a box appears denoting that there is no embedded font nor any system font that can render that character in those styles.

Now here is where it gets weird.

If the exact same Unicode font is installed onto the system, it begins displaying the Asian characters in bold and italic. This makes no sense as the Bold and Italic characters are not in the font as demonstrated when Flex tried to embed that font to satisfy those css styles above. Yet it is evident that this font is being utilized to display the bold and italic characters as before they were just boxes before it was installed as a system font. Is this some kind of Flex voodoo? And if so is there some way I can programmatically invoke said voodoo as I cannot rely on the user having to go out and get the unicode font installed on their system.

Edit: Here is some further information that may clarify the issue.

My question is not really how do we do multiple font faces and weights for roman characters, it is "How does Flex apply bolding and italics to a system font. Even more so when it says that that font does not support those when trying to embed that font."

The steps to make the issue reproducable are such:

1. Embed only MS Arial Unicode into the application and deploy it.
2. On a fresh Windows 2003 machine, open up Firefox and select Japanese language.
3. Navigate to the application URL and view the boxes where the bold and italics should be.
4. Now exit Firefox. Install the MS Arial Unicode font into the Windows 2003 system.
5. Open Firefox and repeat. The areas that used to be boxes, are now bold/bold italics/italics Japanese characters.

It isn't so much the how to solve this issue. There are plenty of viable solutions. However what I would really like to know is how does Flex apply bold and italics to a font that it says does not support bold or italics.

Thanks, C

Answer 1

The problem is that you're specifying the same file name for all four font variants. The single ArialUnicode.ttf file contains only one variant.

Using the names from your c:\Windows\fonts directory, you want to embed arial.ttf, arialbd.ttf, arialbi.ttf, and ariali.ttf. These are the normal, bold, bold-italic and italic variants, respectively.

Beware that not all fonts can be embedded freely, both from a technical standpoint and from a legal standpoint.

The legal side is that fonts are software, and so need to be licensed just like any other third-party code you include in your program. You might want to look at the Bitstream Vera font family, as they are liberally-licensed. The family is highly capable, designed to be used as core fonts in Linux and such.

The technical side is that these rules are baked into the TTF and OTF file formats, and tools like the Flex compiler obey the license restrictions declared in the file. If the font is marked "no embed", it won't let you embed it.