A problem occured while loading the plugin: krl_flickr_photoset -> : Assigning the return value of new by reference is deprecated on line 18
kelvinluck.com: Dynamic shared fonts in Flash
Get Firefox! creative commons

Dynamic shared fonts in Flash

Shared fonts in Flash have always promised a great deal but failed to deliver due to a confusing and buggy implementation.

Recently I built a site which made extensive use of shared fonts. To make the site load smoothly it is made up of a number of swfs – one for each section. And rather than embedding Helvetica Nueue Bold Condensed (the font used for navigation and headings) in each swf I used a shared font. This means that the 17kb of font information is only loaded once and is then cached and shared between swfs. This seemed to work exactly as advertised with none of the bugs I remember from previous attempts – maybe something was fixed in the Flash Player?

So far so good. But then I ran into a problem… The site is available in a variety of locales including Russia and Poland. These require different versions of the font (the Cyrillic and Central European respectively). The problem is that Flash doesn’t provide a way to dynamically choose a shared font library to load – the location of the shared font is hard coded in the library item in your FLA.

So what do you do? Abandon shared font libraries and dynamically load a different font swf dependant on the locale and use actionscript to apply a text format referencing the correct font to all of the relevant text fields? Pay for the Shared Fonts Manager? Neither seemed like a nice solution so I tried something else…

Instead of pointing your shared font directly to an swf you instead point it to a serverside page (of the technology of your choice – the site above uses .NET while the example below uses PHP). This page reads the current locale from a cookie and passes the correct font swf back based on this value. Surprisingly enough this seems to work perfectly and allows Home of HD to work across different locales while providing only the necessary font to each user.

An example is probably worth a thousand words so you can see this technique in action and download the source files if you want to see how it’s done.

The only other issue is that you want your fonts to show up while developing. No problem. Just rename the default font swf file to the name of the serverside script (e.g. fonts.php in my example) and magically it works. Just remember not to overwrite your actual serverside script with this dummy one when you upload your changes!

Update

While writing this article and looking for links about shared fonts I stumbled across a post by Mario Klingemann where he suggests this exact technique. Back in 2003! Since I already wrote the examples and article I thought I might as well publish it but kudos to Mario for coming up with the idea years before me!

  1. nice workaround!
    you can actually do this without using any server-side code though, have a look at my comment on http://oddhammer.com/index.php/site/comments/shared_fonts_for_flash/


    — Matt    Feb 12, 10:40    #
  2. Hey Matt,

    Thanks for the alternative workaround. The problem with that way (correct me if I’m wrong) is that you need to apply the TextFormat to each TextField with actionscript. And so you can’t lay the TextFields out in the fla using the correct font…

    Cheers :)


    Kelvin Luck    Feb 12, 10:49    #
  3. Yes, that’s very true. you would have to set them to some default font and then override that using a TextFormat object. It does, however, have the advantage of allowing you to embed more than one ‘type’ of the font though (e.g. bold, bold italic) which you don’t seem to be able to do with font library items.


    — Matt    Feb 12, 13:21    #
  4. As far as I know you can embed more than one “type” of a font with my method. In the Home of HD site I share the bold face of the font, I could easily change it to be the normal or also embed the normal. The downside is that you would need to give the normal a different name so simple [b] tags in a TextField wouldn’t work to select the embedded bold version – I’m not sure if this works your way?


    Kelvin Luck    Feb 12, 15:43    #
  5. yes, that’s the main advantage of the method I’m using, the ability to embed several types of the font and use them all in the same textfield so that use can use bold and italic tags within the text.
    Bizarrely I’m struggling to get this to work on the Web though – I’m trying to use MovieClipLoader to detect when the fonts are loaded in but the onLoadInit event seems to be firing too early… if I switch to using a setInterval to give it a few seconds to load it all works fine but that’s hardly a robust technique!


    — Matt    Feb 13, 10:03    #
  6. Anyone know how to get Flash to export cyrillic characters into font symbols?


    — jtura    Feb 27, 13:05    #
  7. Hi Jtura,

    Yes – if you use a font with cyrillic characters and embed the font using my method the cyrillic characters are embedded… You can see here I have loaded the Cyrillic version of Helvetica Nueue Bold Condensed… Not all fonts will include all characters though so you need to make sure your font has the cyrillic characters available…

    Hope that helps,


    Kelvin Luck    Mar 1, 11:21    #
  8. The CASA framework has a nice font manager that we’ve been using… and it’s free.

    Article detailing implementation


    Jeffery    Jul 11, 23:27    #
  9. Hi!

    Can you please tell me in wich version of Flash did you do this?

    thx, Toni


    — toni    Jul 17, 08:11    #
  10. Hi,

    @Jeffery – cool, that looks like a good explanation of the same approach that is suggested by Matt above?

    @Toni – I did this in FLash 8 but I don’t see any reason it wouldn’t work in Flash 7 or possibly even 6… It’s not necessary in Flash 9 which has much better handling of fonts…

    Cheers,

    Kelvin :)


    Kelvin Luck    Jul 17, 20:00    #
  11. Looks like I am a few months behind but I am very glad I found your post. I am currently localizing a large global portal in a similar fashion to your HD-DVD example but running into some problems. Have you heard of anyone having an issue with certain fonts using characters such as Thai or Chinese. The solution works flawlessly with my latin font but not with others. Take Thai for instance it does not display the Thai characters. I have ensured my XML is UTF-8 and checked it without the shared libs and the font is capable of displaying the correct characters. But once the font is utilized in the shared lib it no longer displays the Thai characters.


    justen    Jan 8, 19:15    #
  12. Hi,

    I’m sorry to say that I’ve got no experience with Thai or Chinese characters and no method of testing it out. Please report back here if you do find a solution,

    Cheers,

    Kelvin :)


    Kelvin Luck    Jan 12, 08:27    #
  13. Hi
    I’m having the same problem with Thai characters. I’m using the FontManager from the casaframework and my fonts all load in fine for latin but for Thai the characters don’t display. I’ve triple checked my exporting and embedding. If anyone has some experience with this problem then please share! I hate Fonts in Flash argh


    — daniel    Feb 28, 14:49    #
  14. I have done a compilation of dynamic fonts embeding and I have it explained in more datail over here:
    http://salsadepixeles.blogspot.com/2008/04/embedding-dynamic-fonts-on-flash8-maybe.html


    Jaime    Apr 9, 22:16    #
  15. Very Good Solution. Great!!!

    EN


    — EN    Jul 29, 14:46    #