New video tutorial on runtime font loading
 |
I just uploaded a new tutorial showing the best practice method of creating and using external font SWF files using Flash CS4. You can now easily create font files with a subset of characters using the new Flex metadata support. This was not possible prior to Flash CS4 and the new workflow speeds things up considerably. This area is kind of a black art but once you figure it out it can be very powerful. |
Lee
By header thought that it is possible now to Embed at runtime but it seems it is still impossible… Would be useful in all those projects with online Presentation/Image/Banner creation.
Good One Lee
Thanks for this tutorial but I was wondering Is this can be used in Middle East and Japanese fonts
@Nabeel Yes absolutely. You can create a font SWF with just the Middle East or Japanese glyphs and then depending on where the user is located, load in the right font.
very usefull ! but how did you specify if this is a pixel font ?
like when you choose “pixel font” on the antialias combobox when you select a TextField in IDE ?
Great, now I have a better way to embed my fonts when I want multiple languages selection
Thanks!
Sorry man, you are wrong…
It was possible with Flash CS3! I use it a lot.
But anyway, it’s nice to let people know how to load font on run-time. “embed” was there all the time
Is it possible to make something like this work with CS3 / Flash Player 9? I realize that the embed tag isn’t supported, but I tried to do something like this a few weeks ago compiling with Flash Develop. I was able to compile the file, but when I load it into a CS3 created swf, I get an error message saying that the embedded font doesn’t exist.
@Gil No you could not use the embed meta in Flash CS3.
@slim You can use Flex Builder to do it or compile on the command line with MXMLC. I’m not sure about the workflow from Flash Develop though.
Check out this blog post for quick Unicode ranges reference:
http://blog.flexexamples.com/2007/08/07/specifying-certain-unicode-ranges-for-embedded-fonts/
Hi Lee,
Thanks so much for this one. I have struggled with embedding for a bit. For some reason though, this isn’t working and it’s not throwing any errors. I disabled the font and test it and nothing. I can’t seem to figure out what else it can be. I’m going to run through it again and see if I missed something.
Thanks!
Chris
Weird, I have the code exactly as yours and it just doesn’t show up. I even tried another font. Is their anything else that would cause the font from not appearing? It is activated when I export the initial font.swf.
Thanks!
Lee,
I’m an idiot. I had my text as all lowercase so it WAS doing it’s job and not showing anything. Sorry for the multiple posts. Thanks again – this is great!!!
Chris
Lee and everyone who’s doing this, what kind of filesizes are you getting with your swfs that are nothing but embedded fonts? If you embed, say, all upper and lower case letters, number and a handful of punctuation, how big is your swf?
In my aforementioned swf that I compiled through FD, but couldn’t get the font recognized by an importing swf, I’d get a minimum of about 30K embedding Arial no matter how few characters I indicated with the Unicode references.
How would you replicate this in cs3? Would it involve a swf with a textfield that had only a subset embedded then loading this swf in the same manner?
Great post lee!
Sorry Lee, again you are wrong… it is possible with CS3.
you are right about that the “Embed” was not possible on an actionScript layer, but it was possible on .as files…
So just creating a document class that will let you use the “Embed”.
for example:
package
{
import flash.text.Font;
import flash.display.Sprite;
public class FontAsset extends Sprite
{
[Embed("FONT_FILE_NAME.ttf", fontName="FONT_NAME", mimeType='application/x-font' , unicodeRange='U+0000-U+007F')]
public var m_font:Class;
public function FontAsset()
{
Font.registerFont(m_font);
}
}
}
Using this “.as” file as your “Document class” IS POSSIBLE in CS3!
Hi all. For the CS3 guys, I think specifically here Lee is talking about new CS4 features around Flex metadata, whereas in CS3 what you can do is embed fonts within a symbol and make a very specific subset of glyphs in order to make your files as compact and efficient as possible, whether it’s only letters, only numbers, both of the above but no punctuation, or even only specific characters. This makes sense as obviously fonts can be quite expensive on file size if you are embedding a lot of different styles. Sorry if I’m stating the obvious!
mhh, i use click2flash. It hides every flash movie, i have to click everey flash movie to see it. so mhh, with this technique i have to click every single header
im not sure this is a good practice to show important content like headers
@Gil I’d be interested to hear your techniques for this. Using Flex metadata requires compiling with MXMLC which is not used by default in CS3. I just tried it on a copy of CS3. If there is a way to target it then I’m sure people would love to hear it
@Gil Seriously, you are making me sick and you sound like a child. We’re all here to help each other – not prove each other wrong. And if you do know so much, why are you reading this blog. Work on that attitude man. (sorry to be off topic Lee).
[...] for the right way (or just different methods) that actually work. Lee Brimelow just posted up a great tutorial on embedding ONLY the fonts and special characters you want at runtime. Not only does this keep [...]
@slim I just did a test with Avenir using just a-z and it was 8k. When I added in punctuation, it was 12k. Try using a non-system font and see if it differs. I’m going to do a test with Arial now.
Thanks, chris. I look forward to your results with Arial.
Hi,
First of all Chris, I wanted to say that I LOVE this blog, I get to learn many new things here! I read this blog because Lee is great and his tutorials are top-notch!
Now, back to the issue, yeap you have to compile using MXMLC… sorry if I wasn’t clear. The new thing here is that now it is possible inside CS4 IDE. and yeap that’s very cool.
Gil
Really helpful tutorial.
Can you explain how the actionscript looks like, when i create a new font in the library as a font source?
I have to use Helvetica Neue LT Std 97 Black Condensed as the default font, but i can’t get the embed tag source name work.
So i would like to try the library way.
Hey there Lee,
Another reason to use the method you describe in the video is cross platform collaboration. At times a designer that works on a PC will create something that just looks ‘off’ when passing it on to the developer with the similar or even the same font on a Mac. In addition to looking odd, it can be a real pain to get the font name right, since these differ greatly between the two platforms – even if you use the same TTF file. If you use a nicely exported SWF with an embedded character range, you don’t have to worry about those inconsistencies anymore.
I have a question for you though. In real-coding situations if you deal with fonts you soon run into the need for italic or bold glyphs, or even bold-italic combined. Could you share your opinion on the best practice for combining these glyphs into the same textfield? I use a specific set of snippets including CSS for this, but they always feel like an ugly hack to me…
Cheers, EP.
@slim This is a weird one. Because it’s a system font, I keep getting errors telling me to alias the name using fontName. I even tried making a duplicate of the font so it wouldn’t conflict. I honestly am not sure how to handle system fonts. Did you get any errors when you tried to publish it?
Yes, Chris. I did get errors, but not while compiling. When I’d import the swf with the embedded font into another swf, I’d get an error saying that the font didn’t exist. I’ll have to try this again, to pass along the specific error.
FWIW, I didn’t use the name “Arial.” I used “_Arial” and some other name, I don’t recall what, that didn’t use an underscore, but that didn’t conflict with any existing font name.
@slim Well, not sure but it seems when I set embedFonts=true, they don’t show up. When I set it to false or comment it, the text shows up, but with no format. I’m thinking you can’t embed a system font because it’s a “system font” so everyone has it. But what if they don’t for some reason. Not sure what the answer is, but I’m curious if anyone does know.
I like, epologee need to know how to handle bold and italic, is there a good solution for this when embedding fonts? I am importing html and need to be able to render it with a embedded font… epologee, if you had a solution, no matter how ruff can you share it?
I second/third Matts/epologee (post #25 / #29). How do you define the type of font? Some font files have all the styles in the one package and I can’t seem to include the one I want. This can seriously bloat the file size.
Thanks all!
After posting I found this syntax which seems to do it.
[Embed(systemFont="Futura", fontName="FuturaBoldItalic", fontWeight="bold", fontStyle="italic", mimeType="application/x-font")]
I haven’t investigated this thoroughly … gotta leave work now … it’s bbq-o’clock in Australia … hope it helps.
Michael , epologee, This is what I came up with that works for me.
When embedding the fonts use the font weight and font style commands, the example below is for BOLDITALIC but just remove the weight or style command to embed italic and bold. Create all 4 embeds in the same file, then in the file you want to load the fonts into use the fontFamily command in the style, it will load in the proper styles. Sorry if formatting sucks, i dont post very much.
//—–embed font file
[Embed(
systemFont=\Myriad Pro\,
fontFamily=\MyriadPro\,
fontName=\MyriadPro\,
fontWeight=\Bold\,
fontStyle=\Italic\,
mimeType=\application/x-font\,
unicodeRange=\U+0020-U+007E\)]
var MyriadProBoldItalic:Class;
Font.registerFont(MyriadProBoldItalic);
//——- file to display font
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, fontLoaded);
loader.load(new URLRequest(\Myriad.swf\));
function fontLoaded(e:Event):void
{
var defaultStyle:Object = new Object();
defaultStyle.fontFamily = \MyriadPro\;
var style:StyleSheet = new StyleSheet();
style.setStyle(\.defaultStyle\, defaultStyle);
var t:TextField = new TextField();
t.embedFonts = true;
t.styleSheet = style;
t.htmlText = \This is a GOod test of HO! this will # work BOLD TEXT\;
addChild(t)
Michael, and Epologee, I figured out a way to embed Bold and italc, add additional embed tags inside the tag use the same font, but choose fontWeight=bold, or fontStyle = italic, then when load this swf, use fontFamily in they style sheet. If you want a working example, email me at mattjhughes at (gmail) dot com
What if you want to do an “Ultra Black” or “Condensed Black”? Has anyone figured that out? Bold works, but when I try anything besides bold or italic, I can’t seem to get it to work. Any suggestions?
Much appreciated!
Isn’t that another font altogether? I think you’ll have to embed that, as well.
Very good tutorial. There is also very good article about Embedding Fonts in Flash: http://www.myxones.com/2009/03/11/embed-font-in-flash-actionscript/
Thanks all!
[...] > The Flash Blog » New video tutorial on runtime font loading [...]
When I try to open either .fla file in CS4 I get this error “The docfile has been corrupted.” and doesn’t open the file.
Does anyone know why this error was caused or how to fix it?
I had problems with using the CS3 methods when trying to load remote files even from with the Flash IDE (so not a security problem).
I have a Fonts.swf which contains the embed tag etc, compiled with the Flex SDK for FP9.
I ended up using a FontLoader class from http://etcs.ru which works great, it looks like he basically creates a blank swf using byte array and puts the fonts from the loaded in swf into the new one.
I did also test loading in my Fonts.swf file using URLStream and then on complete loading the bytes into a bytearray which is then loaded into a loader using loader.loadBytes(byteArray). Worked well also.
Any comments on either of these methods?
public function load(url:String) :void
{
urlStream = new URLStream();
urlStream.addEventListener(Event.COMPLETE, completeHandler);
urlStream.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
urlStream.load(new URLRequest(url));
}
private function completeHandler(event:Event) : void
{
var loader:Loader = new Loader();
var fontData:ByteArray = new ByteArray();
urlStream.readBytes(fontData, fontData.length);
loader.loadBytes(fontData);
}
Is there a way to have the Embed Meta tag or something somewhere to set the text as Bitmap Text so that it does not get anti-aliased?
Eg: I can import a new Font via the Library, set it’s font size and check the box that says \Bitmap Text\ and then it does not receive anti aliasing.
good solution
but unfortunately it doesn’t works when I use htmlText
with bold tag inside for example
tf.htmlText = “RUNTIME FONTS”;
this is a big issue for me
@brice,
You’ll need to import a bold version of your font. However, many of the designerrific fonts that we have don’t have a bold version. You’d more likely have two fonts, one of which is a bold version of the other, and then switch the fonts with the tag in your html text.
Robert
Back to the video. Fanatastic and well presented… But, i’ve found the solution only works for Western Fonts if i use a Symbolic Font no characters appear (e.g. font “BONNIE” or “BUMP”).
Anyone help with this?
Thanks,
Mark.
Embedding the font functions perfect. But how to embed multiple styles like italic, boldItalic etc and use in the same TextField?
I would appriciate any help.
Thanks a lot,
Tuna
Hi, nice tutorial Lee. But … how do I embed styles like Medium or Black? I am trying to do it for some time and there is no success when using ActionSCript + Embed tags method? Has anyone done it?
Cheers,
Jacek
Nice tutorial Lee. I was trying to use this font embedding technique with the difference being that my text and CSS are loaded at runtime as well. I usually load the CSS first and then the XML that has the text I want, while having the font embedded in the library. Obviously, that works fine.
But when I want to incorporate the external font swf it doesn’t work. Here’s what I have:
public function AboutSection()
{
/* abtCSSLoader = new URLLoader();
abtCSSLoader.addEventListener(Event.COMPLETE, cssLoaded);
abtCSSLoader.load(new URLRequest(“css/about.css”)); */
fontLoader.load(new URLRequest(“assets/fonts.swf”));
fontLoader.contentLoaderInfo.addEventListener(Event.INIT,fontInit);
}
private function fontInit(e:Event):void{
trace(“font loaded”);
abtCSSLoader = new URLLoader();
abtCSSLoader.addEventListener(Event.COMPLETE, cssLoaded);
abtCSSLoader.load(new URLRequest(“css/about.css”));
}
private function cssLoaded(e:Event):void{
aboutCSS = new StyleSheet();
aboutCSS.parseCSS(e.target.data);
trace(“css loaded”);
aboutLoader = new URLLoader();
aboutLoader.addEventListener(Event.COMPLETE, xmlLoaded);
aboutLoader.load(new URLRequest(“xml/about.xml”));
}
private function xmlLoaded(e:Event):void{
aboutXML = new XML(e.target.data);
trace(“xml loaded”);
trace(aboutXML.content[0].welcomeText);
welcome_txt.selectable = false;
welcome_txt.multiline = true;
welcome_txt.wordWrap = true;
welcome_txt.styleSheet = aboutCSS;
welcome_txt.embedFonts = true;
welcome_txt.htmlText = aboutXML.content[0].welcomeText;
}
The name of the embedded font is “Myriad” but nothing shows up in my text field. Any thoughts?
Awesome tutorial. I’m able to get it working locally , but I want to create a common directory on a remote server that will hold all common fonts I might use.
BUT when I’m working locally, I’m not able to download those fonts for use when building my app. I’ve tried doing a Securit.allowDomain(‘*’) + allowInsecureDomain in both the font SWF and in my loading SWF — what else to I have to enable/disable to make it happen?
Thanks!
Anyone have any ideas on preloading a ttf via binary/stream methods (or other?) into a ByteArray and then converting this back to a font class?
This would be a better solution I would expect than creating swf rappers for fonts.
I have tried this using bulkloader loading in a ttf set to binary mode into a ByteArray and then casting the preloaded item as Font.
eg (not 100% correct – but for example)
var myByteArray = oBulkLoader.getBinary(“myFont.ttf”);
var myFont:Font = myByteArray as Font;
trace(myFont.name); // traces null
Any ideas?
Excellent tutorial.
It gave me the solution to the one pain I always felt in developing various multilingual applications. Thanks a million.
I am however faced with an issue in this regard and wondered if you had a solution to that.
I used the technique to embed indic font bengali, where some glyphs like 09BF is supposed to stand to the left of the consonant.
When using system font the text shows correctly, however when embedding the font using the procedure as described by you, the glyph appears to the right of the consonant instead of the left.
Is there a solution to this?
Great video, super helpful.
I am, however, having an issue anti-aliasing the the text. I have changed the type to advanced and tried to adjust the thickness/sharpness but I don’t get differences between the regular and anti-aliased outputs. I tried several different fonts but all the same (incorrect) result.
Any ideas to I am doing wrong would be greatly appreciated.