HowTo: Embed fonts in a FlexBuilder AS3 project
A subject particularly far away from my heart; I have always loathed font embedding, because there are so many ways of doing it and they don’t always work and when they do it feels like some weird voodoo that could inexplicably disappear at any moment is part of it! Which is why I’m very grateful to have recently been shown a method of achieving this by Unwrong’s marvellous Flash Developer Jonathon Pace. Jon’s method is simple, relatively error-free and seems to work for all font types - the ones I’ve tried thus far, at least - which was always the biggest bugbear for me; it sometimes felt like you had to know a different embedding method for each different font type!
So, using Jon’s method what you have to do is:
- Create a fonts swc;
- Ensure your compiler includes every font in your swc; and
- That’s it! Use your embedded fonts
Open Flash, create a new document, right-click on the Library panel and select ‘New Font…’
In the resulting ‘Font Properties’ dialog choose the font you want using the dropdown, uncheck all the checkboxes and ensure that the ‘Name’ field exactly matches the ‘Font’ dropdown. (just to explain: you don’t have to make them match but it makes things easier for you. FlexBuilder will take the name of the font from the ‘Font’ dropdown and not the ‘Name’, which is counter-intuitive and confusing, so making them both match avoids this confusion)
Repeat this process until you’ve got all the fonts you want in the library. Then ensure that ‘Export SWC’ is checked in your ‘Publish Settings’ and you’re good to go!
Export the swc to wherever you want it to live - which would be somewhere in your FlexBuilder project, ideally - and compile that puppy!
2. Ensure your compiler includes every font in your swc
Now, over in FlexBuilder open your project’s ‘Properties’ dialog, go to the ‘ActionScript Compiler’ tab and add something like the following to the ‘Additional compiler arguments:’ textfield:
-include-libraries path/to/your/fonts.swc
Where ‘path/to/your/fonts.swc’ is the actual path to the fonts swc you just created (this will always be a relative path, relative to your project’s source directory). ‘-include-libraries’ will ensure that you include every last font in the swc.
That’s all there is to it! You can now simply access your fonts by the name you gave them in the swc:
var textFormat:TextFormat = new TextFormat("BetonCross-Light", 12, 0x000000);
Tags: ActionScript3, AS3, embed fonts, FlexBuilder
January 9th, 2009 at 1:07 am
That sounds good! As long as your swc works ;)
January 9th, 2009 at 11:25 am
Doesn’t it? Yes, as you might imagine, I’ve had a swc errors but thankfully twas only the failure to actually create a swc in the first place. I copied an existing ‘fonts.fla’ file from an older project to a new project only to find that it wouldn’t compile a swc [only a swf], even with ‘Export swc’ checked. I solved that by copying the original .fla to my desktop, renaming it ‘Cfonts.fla’ and putting that in my new project. The same file copied only with different name, compiled a swc just fine.
Go figure eh!
July 15th, 2009 at 5:56 pm
Once again this method comes up trumps. You don’t usually have to use the additional compiler arguments to force the fonts to be included, once the swc is part of the build path you can reference the embedded font by creating a new instance:
var mainFont:Font = new Arial();
but if you need to use the textfield properties box to embed weird ranges of Arial Unicode MS, then you don’t get the option to assign a class name. If you do a forced include like this, it’s no longer a problem.
Thanks.
September 23rd, 2009 at 4:10 pm
As an added note to “1. Create a fonts swc”… if you checked “Export swc” in the publish settings and the SWC file still isn’t being created, make sure you set the font to be exported for ActionScript.
To check, right-click the font in the library and choose Properties, then in the “Linkage” section, check “Export for ActionScript.” (If you don’t see a linkage section and have a button marked “Advanced”, click that button to go to the advanced view; you’ll see it there.) You may get a message “A definition for this class could not be found in the classpath, so one will be automatically generated in the SWF file upon export” — that is fine.
January 30th, 2010 at 5:07 am
^ +1
I’m working with FlashDevelop here and unless the font is set to be exported for ActionScript, it doesn’t work.