Embedding fonts in Flash CS4 using ActionScript

by Peter deHaan on November 24, 2008

in Embed, Flex

The following example shows how you can use the Flex SDK in Flash CS4 to embed a font using the [Embed] metadata.

Full code after the jump.

// ActionScript 3.0
[Embed(source="assets/ARIAL.TTF", fontFamily="ArialEmbedded")]
var ArialEmbedded:Class;
 
var arialEmbeddedFont:Font = new ArialEmbedded();
 
var textFormat:TextFormat = new TextFormat();
textFormat.color = 0xFF0000;
textFormat.font = arialEmbeddedFont.fontName;
textFormat.size = 32;
 
var textField:TextField = new TextField();
textField.autoSize = TextFieldAutoSize.LEFT;
textField.wordWrap = true;
textField.defaultTextFormat = textFormat;
textField.embedFonts = true;
textField.text = "The quick brown fox jumps over the lazy dog.";
textField.width = 500;
textField.x = 25;
textField.y = 25;
addChild(textField);

{ 18 comments… read them below or add one }

1 JE 11.28.08 at 4:39 am

Where is the defference between Embeding Fonts in Flash CS3 and Flash CS4 ;) ?

2 Peter deHaan 11.28.08 at 9:15 pm

JE,

I’m not sure. I didn’t have time to test if using the Flex SDK worked in Flash CS3, so I didn’t know if it worked in earlier versions.

Peter

3 2pha 12.05.08 at 4:27 am

Whatever the difference is, is has broken my site :(

4 casper 01.23.09 at 8:07 am

Just what I needed

dank u

5 Jloa 03.18.09 at 6:14 am

Hi guys, that doesn’t seem to work for me. I have this error when compiling:

Embed is only supported on classes and member variables.

6 Peter 04.01.09 at 2:44 am

Hello. Maybe this is a weird thing to ask but. Do I NEED flex builder installed inorder to have this work? Or can I just put it in my class with flash cs4.. I have never used flex builder and I’m so scared of it! Just as I was when as3 came along :)

I keep getting an error: unable to resolve “.otf font name here” for transcoding.

7 Peter deHaan 04.01.09 at 5:57 pm

Peter,

You shouldn’t need Flex Builder installed, but you may need to install a full version of the [free] Flex SDK. You can grab the latest and greatest Adobe Flex SDK from the opensource.adobe.com site at: http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3

Peter

8 Lel 06.09.09 at 1:35 am

thank you, it’s just what I need …
but still it doesn’t work right… I want arial but I get some sort of serif font, like times…
where did I go wrong ?
There is an order to keep for the text and textFormat statement ?

9 Viktor 07.01.09 at 11:47 pm

Thanks!

There is a difference between CS4 and CS3 embeding fonts. There is a bug in CS4 embeding cyrillic fonts. So this is only one way to do it in CS4.

10 Peter deHaan 07.02.09 at 6:35 am

Victor,

Out of curiosity, what is the Cyrillic font bug in CS4?

Peter

11 Sein 07.23.09 at 10:53 pm

AMAZING! IT did the job in my case!

12 adriaan 08.01.09 at 2:12 am

I’ve been embedding fonts in my Flash projects for years on my PC. Now I’m on a Mac and I can’t embed as I once used to. Here’s what I’m doing:

Installed OpenType version of “Akzidenz Grotesk Berthold” (my client’s font of choice) into my Computer library in Font Book. Then I use an external SWF with the Font added via “New Font” in the library. I select Akzidenz and make the export name “BertholdAkzidenzGrotesk”. In the first frame of this SWF I code:

import flash.text.Font;
Font.registerFont( BertholdAkzidenzGrotesk );

On my PC sometimes I had trouble getting the font to load so I’d need to use the actual TTF file name on a TextField, as in:

var format : TextFormat = new TextFormat();
format.font = "AkzidGroCFFLig";

But this doesn’t work, nor does:

var format : TextFormat = new TextFormat();
format.font = "BertholdAkzidenzGrotesk";

Nor does:

var format : TextFormat = new TextFormat();
format.font = "Berthold Akzidenz Grotesk";

This would always work on my PC (I’ve developed websites for Nokia using this method)…What am I suddenly doing wrong?

Thanks for your help.

Best,
adriaan

13 adriaan 08.01.09 at 2:18 am

PS: I do with with “Verdana” and it works…

14 jayesh 08.18.09 at 12:27 am

How can we embed multiple fonts? I tried having two lines of Embed with different font-sources and Class names. It says – An Embed variable must not have an existing value. Any clue?


[Embed(source = "fonts/isocteur.ttf", fontFamily = "ISOC")]
[Embed(source = "fonts/Helvetica.ttf", fontFamily = "HELV")]

-jayesh

15 jayesh 08.18.09 at 2:00 am

found it here.

Excerpt below –

You add metadata to ActionScript on the line immediately preceding the line of code that the metadata applies to. The compiler then takes the metadata into account when compiling the line of code that follows it.


[Embed("../button_up.png")]
private var buttonUpImage:Class;

The [Embed] metadata tag tells the compiler to embed the file named button_up.png in the SWF file and that the file should be associated with the variable named buttonUpImage.

16 martin 08.25.09 at 1:29 pm

I want to embed my font with the following code:
[Embed(source = "../../assets/fonts/HelveticaBold.swf", fontFamily = "HelveticaNeue LT 75 Bold")]
public static var HelveticaBold:Class;
….
and the code used above. But I don’t see my text. Whats wrong?

17 Shanti 09.03.09 at 8:38 pm

Thank You so much! This is what I wanted!!!

18 lordB8r 10.26.09 at 7:39 pm

not sure if it’ll help, but i’ve been trying for a while to embed some custom fonts that a client wanted to use. Not finding an easy way to get the font’s i have from font-book (on a mac), i created a css that uses src:local(‘assets/fonts/customFont’). Then I created a swf from the css, and then used that in a global{ src:url(“assets/fonts/customFont.swf”);
fontFamily: “customFont”;}
I have no idea if that’ll help anyone else, but suddenly i was finally seeing my fonts in all of my skinned components…

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Previous post:

Next post: