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!
15 Comments, Comment or Ping
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/
February 12th, 2007
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 :)
February 12th, 2007
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.
February 12th, 2007
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?
February 12th, 2007
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!
February 13th, 2007
Anyone know how to get Flash to export cyrillic characters into font symbols?
February 27th, 2007
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,
March 1st, 2007
The CASA framework has a nice font manager that we’ve been using… and it’s free.
Article detailing implementation
July 11th, 2007
Hi!
Can you please tell me in wich version of Flash did you do this?
thx, Toni
July 17th, 2007
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 :)
July 17th, 2007
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.
January 8th, 2008
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 :)
January 12th, 2008
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
February 28th, 2008
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
April 9th, 2008
Very Good Solution. Great!!!
EN
July 29th, 2008
Reply to “Dynamic shared fonts in Flash”