Updated: May 19th, 2010

Archive for May, 2010

On using the [Embed] tag with fontStyle & fontWeight properties.

iconMay 19th, 2010 icon5 Comments

Using the [Embed] tag with fontStyle and fontWeight properties allows for runtime access of a font defined by a single name, that contains multiple font faces. This post discusses how to configure embedded fonts to enable this functionality. The use of TrueType, TrueType Collection, and OpenType font files will also be covered. All examples are specific to source fonts and have been tested by compiling with the Batik, AFE, and CFF font managers that come with the Flex SDK.

The fontStyle & fontWeight embed properties.

When embedding fonts within an SWF file, the fontStyle and fontWeight properties are optional parameters. Using the properties is not necessary to embed a font for runtime use, however correct compile time use of the properties allows for accessing a font at runtime by a single name, that has multiple faces. For a font with a single name, as far as I’ve seen, there are four possible font faces. Those faces are defined by the different states of the fontStyle and fontWeight properties. The baseline states for both properties are set to “regular”, fontStyle has an additional state called “italic”, and fontWeight has an additional state called “bold”. Both properties also accept other states, but at compile time are processed down to either “italic” or “bold”. At least according to the different examples I’ve seen in the Flex SDK (see the isBold and isItalic methods). The four font faces are, fontStyle regular fontWeight regular, fontStyle italic fontWeight regular, fontStyle regular fontWeight bold, and fontStyle italic fontWeight bold. Consider the following two embedded font files.

[Embed source="GenAR102.TTF" fontName="My Gentium"
unicodeRange="U+0061-U+007A" fontStyle="regular" fontWeight="regular" mimeType="application/x-font-truetype"]
public static const font1:Class
[Embed source="GenAI102.TTF" fontName="My Gentium"
unicodeRange="U+0061-U+007A" fontStyle="italic" fontWeight="regular" mimeType="application/x-font-truetype"]
public static const font2:Class

Notice that both classes share the same fontName. After both classes have been registered at runtime using the flash.text.Font.registerFont() method, the “My Gentium” font will be available for runtime use. In addition, the font will contain a font face with regular style and weight, and a font face with italic style and regular weight. For text in a classic TextField, a TextFormat object that uses “My Gentium” for the font property will render correctly with the italic property set to true or false. For text in a text engine TextBlock, a FontDescription object that uses “My Gentium” for the fontName property will render correctly with the fontPosture property set to either FontPosture.ITALIC or FontPosture.NORMAL.

Returning to the different values that the fontStyle and fontWeight properties accept. For fontStyle, values of “italic” or “oblique” will set an italic font face. For fontWeight, either “bold” or a number value higher than 700 will set a bold font face (character case for values does not matter). There’s also documentation that suggests a value of “heavy” will set a bold font face.

Font file types & font managers

TrueType, TrueType Collection, and OpenType fonts all work with the different fontStyle and fontWeight properties. There is one important detail. The file that is referenced in the source property of the embed tag must have a font subfamily that matches the accepted values for the fontStyle or fontWeight properties. To clarify, to set the fontStyle to italic, the source font file must have a subfamily of either italic or oblique. To set the fontWeight to bold, the source font must have a subfamily of bold (character case does not matter). The AFE and Batik font managers will throw a compile time error if the font file subfamily does not match a fontStyle property set to italic, or a fontWeight property set to bold. The CFF font manager will ignore a fontStyle property set to italic or a fontWeight property set to bold if there is no matching subfamily.

To check what subfamilies are available in a specific file, on OS X, open the the file with Font Book. The available subfamilies are listed in a dropdown directly underneath the font name. On Windows XP, AMP Font Viewer is a free application that lists subfamilies available to a specific font file.

TrueType Collection font files can hold multiple fonts, each with a different subfamily. If a TrueType Collection file contains multiple subfamilies it’s possible to embed the different subfamilies under a single fontName that can then be used at runtime. Each font subfamily must be embedded once per font face. The following example shows a single TrueType Collection file being used to embed all four font faces.

[Embed source="Cochin.ttc" fontName="My Cochin"
unicodeRange="U+0061-U+007A" fontStyle="regular" fontWeight="regular" mimeType="application/x-font-truetype-collection"]
public static const font1:Class
[Embed source="Cochin.ttc" fontName="My Cochin"
unicodeRange="U+0061-U+007A" fontStyle="italic" fontWeight="regular" mimeType="application/x-font-truetype-collection"]
public static const font2:Class
[Embed source="Cochin.ttc" fontName="My Cochin"
unicodeRange="U+0061-U+007A" fontStyle="regular" fontWeight="bold" mimeType="application/x-font-truetype-collection"]
public static const font3:Class
[Embed source="Cochin.ttc" fontName="My Cochin"
unicodeRange="U+0061-U+007A" fontStyle="italic" fontWeight="bold" mimeType="application/x-font-truetype-collection"]
public static const font4:Class

After all four classes have been registered at runtime, it’s possible to use a TextFormat to reference the “My Cochin” font with any combination of bold or italic settings. Note that the TrueType Collection is referenced once for each font face.

It’s also possible to mix and match font files to font faces. For example, replacing the first embed in the above example with the following embed is possible.

[Embed source="ChunkFive.otf" fontName="My Cochin"
unicodeRange="U+0061-U+007A" fontStyle="regular" fontWeight="regular" mimeType="application/x-font-opentype"]
public static const font1:Class

Now, after runtime font registering, the non-italic, non-bold “My Cochin” font face will use the outlines defined in the Chunkfive.otf file, while the other font faces will use the outlines defined in the TrueType Collection. Special note: I have only tested the above example by runtime registering each font face specific to a fontName once. Registering by overwriting a fontName with a matching face, I haven’t tried. Undiscovered country.

The majority of this post was based on tests using version 4 of the Flex SDK on OS X. A number of the tests were also verified on Windows XP with version 3.5 of the Flex SDK. As well I used Chunk, and Gentium, two great open source fonts. Cochin was pre-installed on OS X. Haven’t found an open source TrueType Collection file yet. Where possible I checked existing documentation. As always, feel free to correct or comment.

The Author

Johannes Tacskovics
ECMAScript Developer

Portrait of Johannes Tacskovics

On front-end software engineering this is the blog of Johannes Tacskovics, a Los Angeles based ECMAScript Developer. This blog is focused on object oriented software development for the web.

Article Categories

Article Archives

Meta