I’m not a big fan of working with fonts in Flex overall. Truetype font file embedding is hit or miss, and even embedding system fonts seems a little unreliable. Likewise, managing character sets (ie. the glyphs to embed) in Flex is quite rudimentary (unicode character codes? editing the global config XML? blech!). These features are manageable within Flex though, even if they are a little ugly.
One font related feature that’s completely missing from Flex though is support for creating bitmap fonts. This is a shame, because bitmap fonts are sharp and aliased, and look great at small sizes (ex. 9pt Arial is quite readable as a bitmap font).
Fortunately, it’s pretty easy to create a bitmap font in Flash, and embed it in Flex. Simply follow these steps:
- Create a new FLA, and add a dynamic text field on stage. Set your desired font-family and font-size (this is important, because bitmap fonts are created at a specific size) on the field. Embed the characters you want available, and set anti-aliasing to “Bitmap text”.
- Select the text field, and convert it into a MovieClip symbol (F8). Choose advanced options, and give the new symbol a linkage id (or class name in Flash 9 alpha / CS3) of “MyFontHolder”. We’ll use this name to embed the symbol in Flex in order to pull in the font definition.
- Save and publish the FLA. Move the SWF into your Flex project.
- Embed the symbol into your Flex project
[Embed(source="mySWF.swf#MyFontHolder") private var MyFontHolder:Class;
- The font definition will be pulled in with your symbol, and is available for use in styles. The only hitch is that the font will have an auto generated name like “Arial_12pt_st” for a 12 point Arial bitmap font. You will also want to specify your antialiasing type as “normal” to prevent antialiasing, and only use your font at the size it was created (or for oldschool pixel goodness, at multiples thereof).
<mx:Style> .bitmapFontStyle { fontFamily: "Arial_12pt_st"; fontSize: 12; fontAntialiasType: "normal"; } </mx:Style>
That’s it. I’ve tried making it work with Flash’s Font Symbols instead of the MovieClip Symbol, but haven’t been very successful. It’s worth noting that Flex does not recognize font symbol names specified in the Flash library.
If you’re having trouble finding the name of your embedded font, you can use the following code to quickly iterate through the names of all your embedded fonts in a Flex project:
var fontList:Array = Font.enumerateFonts(false); for (var i:uint=0; i<fontList.length; i++) { trace("font: "+fontList[i].fontName); } |
Thanks for the tips. I have been struggling with fonts in flex for days, in particular, with bitmap fonts used on Buttons. I would like to contribute my discoveries
Font Naming when embedding
Flex appears not to accept font names that contain spaces e.g ‘FFF Neostandard Bold’. If you attempt to embed a font with a space in the name, you get the error, ‘font (*) with normal weight and regular style not found’. Its a simple matter of using a font editor program to rename the ‘font family name’ to something basic, no spaces or underscores. I found FontCreator to be an excellent choice.
Font weights on Button Labels
Flex decides that it needs a font weight of ‘Bold’ for button labels, and many bold pixel fonts don’t come with a subfamily setting of ‘bold’. Users can use the font as bold, but softwares don’t recognise it as a ‘Bold’ font. When I attempted to use pixel fonts for button labels, I got a simlar error message to before – ‘font (*) with boldweight and regular style not found’. Again, I used FontCreator to rewrite the font subfamily names to ‘Bold’, and flex recognised and used the embedded bold font in the button labels.
Button labels not lining up with the pixel grid
This one has me stuck. Button labels, and subclasses of Button, intermittently fail to place the label with pixel accuracy. Every second button in my application has a label that is not exactly placed. I have tried every embed method on the internet, including Grants above, with no improvement. I have tried all the placement properties, GridFitType.PIXEL, and soforth, but it seems that for some situations, the label of a button is placed off-pixel. I have tried setting all margins and border thickensses to 0. There is no pattern to this. I have uploaded an image to my space if anyone requires verification:
danieltaylor.co.nz/subPixelPlacement.gif
I would really like help on this issue, as it seems the only alternative is to not use pixel fonts on buttons.
Thanks again for the post Grant,
Daniel Taylor
Daniel, I started dealing with bitmap fonts in Flex about a week ago and have had the exact same problem with Button labels, and have yet to come up with a good solution. I tried subclassing Button and overriding updateDisplayList to properly place the label on pixel, but to no avail. Still working on it …
Part-time Recruiter, Breakneck Flex, & WebDU 2007
I get a lot of emails regarding Flex & Flash opportunities, most on-site with no telecommuting options. These usually come in on average 1 every day. Some days I’ll get 4, 2 for the same job, and some days none….
Does anyone else have strange things happen with the embedded font? For example, selecting the text causes shifts . . .
Tips on using flash embedded bitmap fonts:
I used a different embed system to the one Grant recommended above, because I found it to work out, and its cleaner, with everything being done in the css.
In the flash Authoring environment
1.The simplest way to embed the font is to create a dynamic text field and enter some test characters.
2.Set the size of the characters to your targetted text size.
3.If the font is a bold font, and has a subfamily name of bold, click the ‘bold’ [B] button. If it is truely a bold font, the rendering of the text in the field won’t change.
4.Set the font alias settings to bitmap or alias for readability depending on the font.
5.Select the glyphs that you want to include in the embed.
6.publish the swf.
in your flex application stylesheet
1. Tell flex to reference the font in the swf. this is done 2 ways. If the font was embedded with alias settings, use the standard name.
@font-face {
src:url(“test.swf”);
font-family: ‘FFFNeostandardBold’;
font-weight: bold;
font-size: 8;
}
.FFFNeostandardBold_aliased{
fontFamily: “FFFNeostandardBold”;
font-weight: bold;
fontSize: 8;
}
If it was embedded with bitmap settings, it will be given a new name by the swf, and you need to determine the new name and reference that.
@font-face {
src:url(“test.swf”);
font-family: ‘FFFNeostandardBold_8pt_st’;
font-weight: bold;
font-size: 8;
}
.FFFNeostandardBold_bitmap{
fontFamily: “FFFNeostandardBold_8pt_st”;
font-weight: bold;
fontSize: 8;
fontAntiAliasType: normal ;
}
You must state the font-weight accurately or the compiler wont find the correct version of the font, and it seems like a good idea to state the font-size also.
This must be done when referencing the font in the swf AND when defining a style that uses the font.
fontAntiAliasType is set to advanced by default, which causes flex to alias the font when it wants to. For bitmap fonts that were embedded with alias set to ‘bitmap’, and referenced through the special font family name(*_8pt_st), you must set fontAntiAliasType to normal, which is the same as pixel fitting. This solves the problem of aliased fonts on button labels.
Pixel font aliasing seems to vary from font to font.
My tests showed that NeostandardBold needed fontAntiAliasType set to ‘normal’ while PlanetaBold was best aliased with css setting fontAntiAliasType to advanced and then demanding fontGridFitType as pixel;
.FFFPlanetaBold_aliased{
fontFamily: FFFPlanetaBold;
fontAntiAliasType: advanced ;
fontGridFitType: pixel;
}
It seems a real hairy situation, so trial and error will be the norm.
Dan
Subclass button and try this:
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth,unscaledHeight);
textField.x = Math.round(textField.x);
textField.y = Math.round(textField.y);
}
best,
nick
Not a flex user so I do not know if it is relevant but this link converts fonts into xml maybe it could be usefull somehow
http://www.jswiff.com/demos/index.jsp
Thanks for this really useful info. btw fonts with spaces seemed to work ok for me… anyone else notice that?
Grand, is there a way to add the loaded font to the global fontlist using Font.registerFont(myFont); ?
Or is that not necessary? Can you use the embeded font everywhere in the application, or just where it is embedded?
thx!
You da man.
I’m still getting a ‘font (*) with normal weight and regular style not found’ even after editing the font names. Any idea what could still be causing this error?
Thanks,
Jack
Creating a font symbol in the flash ide library is a good way of creating and loading fonts at runtime. But the downside of this way is that there is no way of selecting the character set. Hw is it then possible to create a font with only japanese characters?
Anybody figured it out?
Grant
Since Flex 4 has been released, this solution doesn’t seem to work as expected. All the fonts I embed in Flash CS4 are loaded in as “embedded” (as opposed to ’embedded cff’, which I would need in order to use these fonts with spark labels).
Any ideas?
Thanks
Graeme
The first comment from Daniel Taylor is very worth reading. Flex has a problem with spacing in the internal name of a font (not the filesystem name). I tried to find a solution beside commercial programs like Font Creator and – surprisingly – I found one at Adobe itself.
http://www.adobe.com/devnet/opentype/afdko/
This font framework consists of several little command line tools to alter OTF fonts. Especially ttx is what I was looking for. It can dump special data from a font into a xml file. Luckily it can also merge it back into the font.
You just have to search for any appearance of the font name with spaces in it and then replace it with something else ( i just entered a “-” where the spaces were). Don’t forget to merge the changes back into the file and you can use your font in Flex.
Thanks a lot Grant for such helpful tips! 🙂