Updated: May 19th, 2010

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

iconMay 19th, 2010

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.

5 Responses to “On using the [Embed] tag with fontStyle & fontWeight properties.”

  1. Very informative article.

  2. Thank you Johannes for your articles.
    I have a question on embedding multiple font collections like *.ttc . Is it possible to embed font face other than regular, bold, italic, bold-italic form single *.ttc file? For example I have Condensed Medium typeface within Futura.ttc file, and need this typeface to be embedded.
    Best regards.

  3. Thanks Denis! About Condensed Medium. To be honest, I haven’t tried anything else other than those four faces (bold, italic, bold-italic) in TrueType Collection files. Using TTF and OTF files I have embedded fonts with other subfamilies. For your situation, I’d try something like:[Embed source="Futura.ttc" fontName="Futura Condensed Medium"
    unicodeRange="U+0061-U+007A" fontStyle="Medium" fontWeight="Condensed" mimeType="application/x-font-truetype-collection"]
    public static const font:Class
    Let me know if that works. Given that the subfamily for that font doesn’t match the four faces, you’ll probably have to reference that font by name only, and won’t be able to specify bold or italic at runtime with ActionScript.

  4. Thanks Johannes for quick answer.
    But unfortunately, suggested embedding doesn’t work as expected. Only normal typeface (Futura Medium) is embedded.
    I’ve managed to convert *.ttc file to several ttf files (using onlinefontconverter.com), so this is workaround for this case.
    You have mentioned that you embedded fonts with other subfamilies, have you succeed in embedding of more than 4 typefaces per single fontName?
    Additional off the topic question – is it possible to embed bitmap fonts using mxmlc (Flash Builder)? I mean in Flash IDE it is possible to set anti-alias to Bitmap text [no anti-alias] for any font, is there any ability to achieve the same result using mxmlc(Flash Builder)?
    Best regards.

  5. The four faces per fontName is a restriction, because that’s all the ActionScript TextFormat API exposes right now. Bold and Italic are boolean properties on the TextFormat object. For text engine text, the API for FontDescription looks like it could be extended in the future. Both the fontWeight and fontPosture properties accept strings, so in theory different values could be added in the future to allow for more than four faces. You can embed one font with more than four subfamilies, but you’ll have to start separating them by fontName once you get past the four options.

    To get bitmap text to work the same as the Flash IDE with mxmlc requires a little more work. You can embed the font with the compiler (mxmlc), but all the extra work that the Flash IDE does to textfields on the timeline to prep for bitmap (non anti-aliased) text, you’ll have to do with ActionScript at runtime after you’ve compiled the font with mxmlc. I don’t know of any embed tag meta data properties that you can add for bitmaps fonts, that are used at runtime by the Flash Player to ensure they render without aliasing.

Leave a Reply

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