Fonts are my bane; not anymore!

I hate managing fonts in Flash, I truly hate it. I don’t understand why it is not easier than this after all that time. How about underline; why can’t we still underline in the Flash IDE? That shouldn’t be voodoo magic, even Notepad has underline, ok, Notepad doesn’t have the underlining functionality, but Wordpad does.

Anyway, my biggest problem with fonts and Flash is not the underlining problem, but when you start using static and dynamic textfields with the same font family but with different font style. When you do that, your dynamic textfields will just not show and that is really annoying. A solution that works is if you put all textfields dynamic, but that’s even more annoying.

Now a really cool feature is that you can now embed fonts using the embed tag just like this:

[Embed(source="assets/fonts/GNL_____.PFB", fontName ="zedia GillSansLight", unicodeRange='U+0020-U+007A, U+00C0-U+00F6, U+2019', mimeType="application/x-font-truetype")]
private var GillSansLight2:Class;

Not sure that this will work when you compile using the Flash IDE, but when doing ActionScript projects or Flex projects this works just fine. This way you can embed ttf, otf and pfb fonts. I am not quite sure how to embed fonts on a Mac system, it will still work with those formats, but I know Macintosh has other formats. The thing that makes this work is that you can specify the font name. Be sure to specify a name that you know Flash wouldn’t specify. My coworker gave me the trick to add the name of the project in the font name that way it’s always going to be different than Flash. If you don’t make it different you will still run in the problem of your dynamic textfields not showing up.

Once you have embedded the font you need to register it in your application like this:

Font.registerFont(GillSansLight2);

This will make the font available anywhere in your application. All you need to do is create a TextFormat with that font and assign that TextFormat to your textfield:

var tf:TextFormat = new TextFormat("zedia GillSansLight");//this is what you put into fontName in the embed tag
myTextfield.embedFonts = true; //this line is also important
myTextfield.defaultTextFormat = tf; //always assign the default textformat before modifying the text property
myTextfiled.text = "lorem ipsum";

Now, using this technique you can choose exactly what character from the font you want to embed. In the previous example the unicodeRange represented those characters:

U+0020-U+007A = SPACE!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz
U+00C0-U+00F6 = ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö
U+2019 = ’

This is a pretty safe set, but you can always change it and optimize it.

Here is a good resource to do Unicode conversion:
http://rishida.net/scripts/uniview/conversion.php

, , , , , , , ,

  1. #1 by Mamzelle - January 14th, 2010 at 12:04

    FYI, it doesn’t work in FLASH IDE :(

  2. #2 by zedia.net - January 14th, 2010 at 13:11

    I just tested it in the Flash IDE and there is a little something you must do for it to work. It is using some Flex classes to load the font so you must specify to Flash where is your Flex SDK.

    To do so go in the Edit -> Preferences menu.
    Click ActionScript on the left and then click ActionScript 3.0 Settings…

    At the top you can set the path to the Flex SDK. Once this is done the code above will compile in the Flash IDE.

  3. #3 by adampasz - January 14th, 2010 at 14:48

    I believe another drawback of this approach is that you can’t specify certain characters to include the way you can in Flash.

  4. #4 by zedia.net - January 14th, 2010 at 14:52

    @ adampasz
    oh, but you can, in the embed tag, in the unicodeRange you can specify range or individual characters. Let say you just wanted those letters:”aB3″ you would do this: unicodeRange=’U+0061,U+0042,U+0033′ use this link to find the unicode that correspond to the characters you want : http://rishida.net/scripts/uniview/conversion.php

  5. #5 by Mamzelle - January 14th, 2010 at 17:03

    Thank you :) .

    I find why Flash IDE trow my error previously when I try to embed fonts in classes. We must definite variable after the embed tag.

    Like below:

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

  6. #6 by Jeff - January 22nd, 2010 at 02:35

    I like your method as it seems a bit simpler than the one I have been using. There is a little more involved in my post but a person could just use the font part of it…

    http://www.jeffguthrie.com/as3-loading-css-and-fonts

  7. #7 by Mark A. - January 22nd, 2010 at 20:30

    Thank you for that: “but when you start using static and dynamic textfields with the same font family but with different font style. When you do that, your dynamic textfields will just not show and that is really annoying”

  8. #8 by Hugh H. - July 14th, 2010 at 07:22

    //always assign the default textformat before modifying the text property //

    Cheers man! that’s a perfect hint! For those who don’t get the embed fonts displayed properly

  9. #9 by Dylan Baxter - August 9th, 2011 at 18:34

    Fonts are still my bane. Another 4 hours wasted so far today, reading docs and blogs, trying six ways from Sunday to embed a font in a lone TextField in my application. I swear if I find two more Adobe hosted documents contradicting one another today, I’m gonna end it all…

  10. #10 by lance - October 4th, 2011 at 15:57

    @zedia.net
    So where do you get the name GillSansLight2? How does that relate to the Font you’re importing?

(will not be published)
Subscribe to comments feed