Embedding fonts in AS3

No more do you have to have fonts in your library you can embed them directly from the folder where they reside using the [Embed] in your ActionScript Project.

You supply the path to the font in the ‘source’ param and then store a name to be referenced to access the font in ‘fontFamily’. You also need to declare a variable of type String or Class for the [Embed] to be assigned to, although you don’t need to reference it in your code.

To access the embeded font you use the String you assigned to the var ‘fontFamily’

[as]package
{

import flash.display.Sprite;
import flash.display.TextField;
import flash.display.TextFieldAutoSize;

import flash.text.TextFormat;
import flash.text.AntiAliasType;

public class EmbedFontTest extends Sprite
{

[Embed(source="C:\WINDOWS\Fonts\ARIAL.TTF", fontFamily="Arial")]
private var _arial_str:String;

private var _arial_fmt:TextFormat;
private var _text_txt:TextField;

public function EmbedFontTest()
{
super();

this.initEmbedFontTest();
}

private function initEmbedFontTest():Void
{
this._arial_fmt = new TextFormat();
this._arial_fmt.font = “Arial”;
this._arial_fmt.size = 40;

this._text_txt = new TextField();
this._text_txt.embedFonts = true;
this._text_txt.autoSize = TextFieldAutoSize.LEFT;
this._text_txt.defaultTextFormat = this._arial_fmt;
this._text_txt.text = “Test Arial Format”;

this.addChild(this._text_txt);
}
}

}[/as]

50 Responses to “Embedding fonts in AS3”

  1. johannes says:

    if u r using a stylsheet in flex you can embed the font in there as well and reference the stylesheet as such

    thats seems a cleaner option IMO. i haven’t done a pure AS3 project yet, only been doing flex stuff, but i presume it is the same

  2. emo says:

    is [embed] supported by flash 9 AS3 preview?

  3. tork says:

    have you ever tried to test it on any machine without Arial font?
    in my humble opinion, this example not quite correct.
    you need to specify family exactly as font states it, finally it turns that font is not incapsulated into swf…
    tested on 9 preview

  4. Tink says:

    I’m not sure what you mean tork, this uses the absolute path to the font file you want to embed.

  5. mars says:

    I too like this way of embedding fonts, however I have run into a strange problem. If I embed “Verdana” font any letter “o” will have the top right part of it cut, so instead of a nice curved shape it looks like a slice has been removed. Weird. Any help?

  6. Gianluca says:

    I’m using the Flash 9 alpha and this way of embeding font in AS3 doesn’t work.

  7. Tink says:

    Flash doesn’t understand any meta tags.

    There is no need to use this method in Flash as you can embed the font in the IDE.

    Granted it would be nice if Flash did understand the embed tag though.

  8. Gianluca says:

    So how to embed font in Flash as3?

  9. Tink says:

    Same as AS 2.0.

    Either have the font in your library or create a TextField on the stage and embed the characters you want.

  10. Kevin says:

    Hmmm…but what if you’re using a document class?
    You can’t set a linkage identifier when you put them in the FLA. So do you have any ideas how to reference those fonts from an external class?

  11. Tink says:

    The same as you would do in AS 2.0, see my previous comment.

  12. Kevin says:

    I did read it, but since Flash 8 allows for a Linkage ID, and Flash 9 doesn’t it was a bit different. You also can’t name the embedded font anything you want due to a bug. Here’s what I found on Adobe:

    There is a bug in the Preview with using embedded fonts dynamically in AS 3.

    Currently, the Flash IDE is not exporting the proper font when you create a font symbol in the library. The work-around is to use the actual name of the font when specifying a custom font name.

    So, a font symbol named “MyArial” will not work. But, if you rename the font symbol to “Arial”, which is the
    actual name of the font, it works.

    The TextFormat class expects a String for the font property. Specifying a class will not work. In the Linkage Properties dialog, please turn on export for ActionScript. And in the Font Symbol Properties dialog, please specify a custom font name that is the same as the actual font name. This font name is what TextFormat.font expects.

  13. Tink says:

    I generally find embeding in a TextField works best for me.

    I would expect bugs means its a very early alpha version.

  14. Jeffery says:

    After talking to an engineer @ Adobe, I found this to be the solution:

    Assuming that you have a font (let’s say Gotham-Bold for the sake of argument) in your library w/ the class name MyFont

    var format = new TextFormat();
    format.font = new MyFont().fontName;

    This would translate to the actual name of the font, in this case “Gotham-Bold”, so I’m not sure if it’s actually embedding it or not. Will comment back when I receive word back from them.

  15. Tyler Larson says:

    From what I’ve read you are doing this wrong, you need to embed a swf file with the font inside to make this work.

    [Embed(source='../assets/MyriadWebPro.swf', symbol='MyriadPlain' )]
    http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=fonts_070_13.html#257734

    but what this still doesn’t answer for me is how do I make this all dynamic and only load the fonts that I need. In flash 8 you could load a swf and after it is loaded everything inside of your swf had access to its library items. Maybe this still works, I haven’t tried yet, but if so why use this embed thing at all?

    Also to note, I found some stuff on the compiler that manages all this. Your font settings are part of the compilers arguments. I haven’t found anything on how to use it but you can tell it how to manage fonts and which fonts to include. It seems to be the same as what we are trying with embed.

  16. Tyler Larson says:

    This guy has got it working, but you might want just the first part of what he is doing. The dynamic thing is just so much nicer.

    http://nochump.com/blog/?p=20

  17. Tink says:

    Tyler the example in your first post if if you want to use a FlashType font in an AS 3.0 Project or Flex project. As of the Flex 2.0.1 update you no longer need to do this to use FlashType fonts in Flex.

    Why do you say I’m doing it wrong? It works fine, then post you link o is just another method.

    Also i don’t undertsand what you mean by making it dynamic. Once your have embedded you font you can use it throughout your app.

    Yes you will still be able o embed fonts in Flash. This post was specific to embedding fonts in an AS 3.0 project.

  18. Piet says:

    This definitely works. Without the embeded font my text would’t antialias, with the embeded font it does.

    Thanks for the tip!

  19. ericsoco says:

    not sure why this affected me but no one else mentioned it, but the backslashes in your Embed tag font file path don’t work for me, i had to use forward slashes. then all was peachy. thanks tink!

  20. Billy says:

    Hi Stephen,

    probably not the right place for this question, but i couldnt find any contact info.

    could you tell me what you are using to display code? my quest for a wordpress code plugin hasnt been very fruitful.

    thanks,
    billy

  21. Ain says:

    Hey Tink

    Regarding the embedded fonts in a library: there seems to be a bug in CS3 compiler because all unicode characters are actually being left out and you can only use Latin 1 chars.

    Does anyway know a workaround for the issue?

  22. Soud says:

    Thank U so much Kevin !

  23. JustGreg says:

    I think this inline method only works with .ttf and system fonts (http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000789.html). For other font types you need to use the old swf-embed trick, then embed the swf in your flex app via css.

  24. [...] w TextFormat(“MyFont”) ); StyleManager.setStyle( “embedFonts”, true ); There are a lot of real slick examples out there that use the Embed metadata to embed the font directly from the fon [...]

  25. Old Monkey says:

    Hey Tink,

    Like your missing eye, you missed out something here mate. You gotta learn professionalism from Tyler Larson. Anyway, nice but useless info.

  26. Tink says:

    This post is now 2 years old and unfortunately I can’t continually update old posts. Maybe I’ll post an update on embedding fonts. You’d now be best to register the Font as well using:

    Font.regsiterFont( font );

    Thats said and as described above, this is a different method of embedding fonts, cutting out the need to open Flash.

  27. Anonymous says:

    Just one question…why the completely redundant “this” in front of EVERYTHING! This is a horrible example to set…

  28. Tink says:

    It’s our old coding style from AS 2.0 which had scoping issues. If you look through any more recent source (this is over 2 years old), you’ll see its not there any more.

    That said we also used to find it useful for distinguishing the difference between class vars and local function vars.

    Here’s a post about it’s usage (as I said its very old) http://www.tink.ws/blog/to-use-this-or-not-to-use-this/.

    And don’t be so scared to use your name, we don’t bite, and there’s nothing wrong with asking questions or commenting on how we work, we appreciate it!

  29. Ain says:

    I believe this is good & proper style of OOP.

  30. Fantastic says:

    this has been an excellent forum, helped me embed in a few different ways, thx everyone :)

  31. [...] on mime-type for the font, I think this was only relevant in Flex 2.0 than Flex 3.x. [7 ] Basics with AS3/Flex without using a library

    [...]

  32. thanx tink! i got this technique down in MXML, but had never tried it w/ pure as3. this was just what i was looking for.

  33. Jeremy Daley says:

    your code is all kinds of throwing errors. for one… TextField is a part of flash.text.TextField, not flash.display.TextField.

  34. sar says:

    i wonder whether he even tested it!

  35. Tink says:

    For those of you having a moan (I like a good moan myself), this code was for (and worked in), the AS 3.0 preview.

  36. [...] k » Blog Archive » Embedding fonts in AS3 Super dad movies Add comments Embedding fonts in AS3 No more do [...]

  37. E. Serrano says:

    I have some experience with Flex and with the Flash IDE. But I’m currently working in a project using ActionScript 3.0 without the Flash IDE and this was exactly the reference that I was looking for. Thank you!

    Just had to change the packages of the following 2 classes (I understand it worked on the preview version):

    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;

    And had to change the path directory separators to slashes (Unix style “/”) instead of the backslashes (“\”) of the example, even when I was working in a Windows PC:

    [Embed(source="C:/WINDOWS/Fonts/ARIAL.TTF", fontFamily="Arial")]

    And it worked like a charm. Thanks a lot!

  38. [...] re info on AS 3.0 dynamic font embedding here. You can put fonts in swfs and suppy it from a folder on your server. The bi [...]

  39. kj says:

    What’s the purpose of _arial_str ?

  40. Empty Bag says:

    In AS3 in flash, here is the link on adobe live docs where we can find the only ‘clean’ way to embed fonts in AS3.

    http://www.adobe.com/devnet/flash/quickstart/embedding_fonts/

    i tried in external class to assign the textformat (with a custom) font as constructor parameter of my class but it’s inner textfield is not set the proper txt format with my custom font, but the arial one : as if in extern class scope, embedded fonts in the fla aren’t reachable … !?

  41. Empty Bag says:

    In AS3 in flash, here is the link on adobe live docs where we can find the only ‘clean’ way to embed fonts in AS3.

    http://www.adobe.com/devnet/flash/quickstart/embedding_fonts/

    i tried in external class to assign the textformat (with a custom font) as constructor parameter of my class but it’s inner textfield is not set the proper txt format with my custom font, but the arial one : as if in extern class scope, embedded fonts in the fla aren’t reachable … !?

  42. SiNT4X says:

    ericsoco’s tip worked great :)

    Thanks a lot!

  43. MeltedMoon says:

    Hi guys! i am really really confused about this. Actually i have a main flash movie which have some Fonts embedded in it in library. I am loading another movie in it using loadMovie function. But the problem is that my loaded/sub movie is not getting the embedded fonts of main movie.
    What i do? i dont want to use Flex. is there anyway to do this? using AS2 or AS3?
    Whats the problem why the sub movie unable to get embedded fonts of main movie?
    thanks in advance.
    Bye.

  44. [...] http://www.tink.ws/blog/embedding-fonts-in-as3/ Embedding fonts in AS3 I love this! … library, be-gone! package { import flash.util.describeType; import flash.display.MovieClip; import flash.display.TextField; import flash.text.TextFormat; import flash.text.AntiAliasType; public class Test extends MovieClip { // be sure this is pointing to a ttf font in your hardrive [Embed(source="C:WINDOWSFontssomefont.ttf", fontFamily="foo")] public var bar:String; public function Test() { var format:TextFormat = new TextFormat(); format.font = “foo”; format.color = 0xFFFFFF; format.size = 130; var label:TextField = new TextField(); label.embedFonts = true; label.autoSize = TextFieldAutoSize.LEFT; label.antiAliasType = AntiAliasType.ADVANCED; label.defaultTextFormat = format; label.text = “Hello World!”; addChild(label); } } } [...]

  45. Ricardo says:

    Hi!

    I have a doubt in this part:

    ‘source=”C:\WINDOWS\Fonts….’

    What about Linux and MAC OS?

  46. Ali says:

    Great information on embedding the fonts by code for TextField.

    Now that we are talking about TextField class, just thought to introduce you a brand new technology named TextArea that is extended from the original TextField class from Adobe which allows you every possible tags even your own custom tags that I thought it might be useful to know for all of us as flash devs :)

    Check out http://doitflash.com/ for more information.
    It not only allows you to load different SWF files by calling different tags but also you have much more control over your Text blocks and its contents… such as calling your custom functions right from your text blocks and passing multiple and different arguments through them; loading talking avatars, video players, buttons, slideshows and more… by calling their own tags and having full interaction between all of the loaded SWF modules and your text block. Check out the site for more information, downloading the platform is free of charge :)

  47. Saraiva says:

    What’s the purpose of _arial_str ?

Leave a Reply