Embedding Fonts

From Frontal Wiki

Custom fonts can be included with Frontal documents using two different techniques. The first can be done by any Frontal user who also has the Flash application. The second option is more straightforward, but requires you build your own Frontal Renderer.

Embedding Fonts In Another SWF Using Flash CS3 and earlier versions

The first way to embed a font is as a font class in a SWF's library. Here is how to do this:

1. In Flash create a FLA and then go to the library pane.
2. In that pane, choose "New font..." This will bring up the Font Symbol Properties:
   
3. In the Font Symbol Properties, choose the font you would like to embed from the dropdown menu. The "name" field is merely the name for the symbol in the library. For this example we select the font "Avenir 55 Roman". (If bold or italic versions of the font do not appear in the dropdown list, then you must use the '<b>' and '<i>' tags with the 'text' tags. In this case you will need to embed the font two more times - one with "bold" checked and once with "italic" checked.)
4. Select the font's symbol, then choose "linkage..." in the library pane. turn on "Export for ActionScript" and set a class name (class names cannot have any spaces). Here we use "AvenirRoman":
   
5. Repeat this for each face of the font that you want to embed.
6. Publish the FLA. Let's assume you published it to "MyFont.swf" in the same folder as the Frontal-enabled SWF.

To embed this font .SWF with your Frontal definition, you use the include tag. Note that both the .SWF and font class are set here (the value for "fontClasses=" is the class name you set in Step 4 above):

<include rel="assets" type="application/x-shockwave-flash" src="MyFont.swf" fontClasses="AvenirRoman" blocking="true" />

Now you can add a text tag that uses the font that was embedded. Note that here we must use the actual name of the font that was embedded (ie, as it appeared in the Font Symbol Properties window) with the font-family style. Let's say we had embedded Avenir.

<include rel="assets" type="application/x-shockwave-flash" src="assets/swfs/MyFont.swf" fontClasses="AvenirRoman" blocking="true"/>
<text style="font-family: Avenir 55 Roman; font-size: 48px; alpha: .5; margin: auto;"><![CDATA[This is Avenir.]]></text>

If the embedding worked correctly, we'll see an anti-aliased version of the text in the correct font and it should be 50% gray. Note that you can also set up a style sheet for the font rather than using it inline with a text tag.

A problem with this approach is that we can't limit the glyphs that get embedded with the font. This can result in very heavy SWFs particularly if, say, we are embedding a Japanese font.

Embedding Fonts In Another SWF Using Flash CS4

In Flash CS4, things get better as we can use the Flex "[Embed...]" construct. This is an alternative to doing "New font..." in the library and is done with ActionScript instead. So the actionscript to be added to the FLA would look like this:

[Embed(systemFont="Avenir 55 Roman", fontName="AvenirRoman", mimeType="application/x-font", unicodeRange="U+0041-U+005A")]
var Avenir:Class;
Font.registerFont ( Avenir );

• The value of "systemFont=" is the name of the font exactly as it appears in the font properties pulldown - in this example it is Avenir 55 Roman
• The value of "fontName" is what will be called by the font-family style in your Frontal document - here it is AvenirRoman
• The other two instances: "var Avenir:Class;" and "Font.registerFont ( Avenir );" can be any name, as long as it is the same in both places. This will be called by the font class in the include tag - here it is Avenir
• Publish the FLA. Now you can embed the SWF with an include tag, and add the font to a text tag as follows:

<include rel="assets" type="application/x-shockwave-flash" src="assets/swfs/MyFont.swf" fontClasses="Avenir" />
<text style="font-family: AvenirRoman; font-size: 48px; alpha: .5; margin: auto;">This is Avenir.</text>

This approach has the advantages of only embedding the characters you wish to be embedded and also being able to set the font name to anything you like.

Embedding Fonts Using The Frontal Renderer SWF

The other way to embed a font is using a dynamic text field directly in the SWF that contains the Frontal Renderer. This is the most straightforward way to do things though it does require you to build your own Frontal Renderer.

After you download the source code to build your own Frontal Renderer you will need to do this:

1. Add a text field to the stage or to a movie in the library that it exported for ActionScript.
2. Choose the font you wish to embed and then choose "Embed..." in the properties pane for the text field.
3. Then choose the characters you wish to embed.

After doing this, you will be able to use this font by setting the "font-family" style to the exact name of the font as shown for the text field in the Flash IDE.

Remember that embedding a font SWF is like embedding any other kind of SWF and so permissions must be considered. If you are having difficulties using an embedded font from an external SWF then try using the Security.allowInsecureDomain() or Security.allowDomain() API in the font SWF (see the Flash documentation for details) as well as those calls in a script tag of the Frontal definition prior to the include tag. You may also try adding the style "load-in-current-app-and-sec-domains: true;" to the include tag.