fonts not being embedded Flash CS4 AS3

Question

Maybe you can help me with a problem I am having. The URL of the project is: http://www.mauriciogiraldo.com/vgline/beta/

It is a Drupal-powered, AMFPHP-connected AS3 web app. The data goes through to Flash with no problems, I have verified that UTF-8 is fine and all. The problem can be better seen in these URLs:

http://www.mauriciogiraldo.com/vgline/beta/#/146

A plaintext version of that link:

http://www.mauriciogiraldo.com/vgline/node/146

(Note the name of the guy)

The font is Inconsolata although I could use any monospace open-source font if necessary. You can see that I have embedded the font (I even opted for the dynamic textfields to embed the whole thing, full charset) as well as the "New Font" menu in the library. Inconsolata shows up with an asterisk in the CS4 authoring tool (which according to Adobe documentation means the thing is embedded).

I have tried other font embedding options to no avail. Inconsolata seems to have that "ō" character when used in the authoring but it is not showing up in the dynamic texts.

Another problem I am having: if I use static text fields the font doesn't get embedded (WTF). I have to convert the field to dynamic and then it works ("the videogame history timeline" top left is a dynamic text field although I would prefer it not to be... that and others). If I use static text field the font gets converted to some sort of Times New Roman font.

The text is AS3-created (as well as the search results).

I am embedding the text via HTML (.htmlText) and styling with CSS.

The whole code is open source and can be found here:

http://code.google.com/p/vgline/

An example of how I fill in a text field can be found here:

http://code.google.com/p/vgline/source/browse/trunk/src/TLDetail.as

A snippet of such code is:

 var ss:StyleSheet = new StyleSheet();
 var css:String = ".title { color:#333333; font-family:Inconsolata; font-size:16; leading:2; } ";
 css += ".date { color:" + StringUtils.rgb2web(data.color.r, data.color.g, data.color.b) + "; font-family:Inconsolata; font-size:14; leading:4; } ";
 css += ".text { color:#333333; font-family:Inconsolata; font-size:11; leading:4; } ";
 css += ".link { color:#000000; font-family:Inconsolata; font-size:11; leading:4; text-decoration:underline; } ";
 css += "a:hover { text-decoration:none; } ";
 ss.parseCSS(css);
 var fechahtml:String = "<span class='date'>";
 if (data.mes != null && data.dia != null) {
         fechahtml += data.dia + " " + StringUtils.month2name(data.mes) + " " + data.anotext;
 } else if (data.mes != null) {
         fechahtml += StringUtils.month2name(data.mes) + " " + data.anotext;
 } else {
         fechahtml += data.anotext;
 }
 fechahtml += "</span>";
 date_txt = new TextField();
 date_txt.width = 275;
 date_txt.embedFonts = true;
 date_txt.antiAliasType = "advanced";
 date_txt.styleSheet = ss;
 date_txt.htmlText = fechahtml;
 date_txt.x = 8;
 date_txt.y = 3;

 addChild(date_txt);

ANY help will be greatly appreciated. I really don't know what to do.

Thanks

Answer 1

Font embedding is one of my favourite enemies of all time when creating flash. But I found a way to reduce the amount of holes in my walls (and bumps on my head).

1. Embed the font into the Library
2. Link the font symbol (in the Library) to a custom class extending the Font-class (lets call it MyFont for now)
3. Create a TextFormat object (let's call it frmt)
4. Set frmt.font = new MyFont().fontName
5. Create a TextField (let's call it tf)
6. Assign tf.embedFonts = true and tf.defaultTextFormat = frmt

Hope this helps.

Answer 2

I had a similar problem with Arial Regular (in a dynamic text field with HTML enabled) not displaying bold text dictated by the html tags in the AS.

By changing the font to Lucida Sans it all worked fine.

Answer 3

I'll have a look later.

It sounds somewhat familiar. I had the same issue with characters not being displayed in the swf in a static text field, although displayed in the IDE( flash cs3), when I was working on a multilingual website. The problem that time was with the Greek Characters in Arial. I had to download a separate version of Arial with proper Greek characters and that fixed it.

Maybe it's the same issue and you need a different version of the same font.

Have you tried the same thing with Courier New or Lucida Console ? I've tried a basic setup( the name Tōru Iwatani written in 2 textields, one Courier New, one Lucida Console, embedded font, dynamic text, rotated textfield, just to test embedding and it diplayed fine.

---

EDIT:

Hi,

I've made some tests using monospaced fonts from dafont.com

This is the snippet I used to find the fonts that should work:

var fonts:Array = Font.enumerateFonts();
for(var i:int = 0 ; i < fonts.length; i++){
    if(fonts[i].hasGlyphs('ō')) trace(fonts[i].fontName);
}

This is the list I got:

Monaco
Lucida Grande
Bitstream Vera Sans Mono
saxMono
JackInput
Liberation Mono Regular
F25 Bank Printer

I've tried a few with 2 different approaches.

Embedding the font in the Library didn't help as you can see here:

Embedding the font using an instance on Stage worked for some of the fonts:

Here is the code I used for the test, pretty messy but it's a test :)

l.text = j.text = f.text = li.text = s.text = b.text = 'Hello Tōru Iwatani...Hello Tōru Iwatani...Hello Tōru Iwatani...';

var lucida:TextField = getStyledTextField("Lucida Grande");
var liberation:TextField = getStyledTextField("Liberation Mono Regular");
var sax:TextField = getStyledTextField("saxMono");
addChild(lucida);
addChild(liberation);
addChild(sax);
liberation.y = 30;
sax.y = 60; 
lucida.htmlText= liberation.htmlText = sax.htmlText = "<body><span class='text'>Hello Tōru Iwatani...</span></body>";

function getTextField(font:String):TextField{
    var label:TextField = new TextField();
    label.defaultTextFormat = new TextFormat(font,11,0x33333);
    label.autoSize = TextFieldAutoSize.LEFT;
    label.border = true;
    label.embedFonts = true;
    return label;
}

function getStyledTextField(font:String):TextField{
    var style:StyleSheet = new StyleSheet();
    style.parseCSS(".text { color:#333333; font-family:"+font+";  }");
    var label:TextField = new TextField();
    label.styleSheet = style;
    label.autoSize = TextFieldAutoSize.LEFT;
    label.border = true;
    label.embedFonts = true;
    return label;
}

l, li, b, j, etc. are instance names for the dynamic textfields on stage using fonts like lucida grande, liberation, bitstream vera sans mono, JackInput, etc.

I'm not sure what the issues is, but embedding the characters on stage worked for me, also, I embedded all the glyphs just to make sure. It takes ages to compile, you might want to pick a font that you like out of those that work, and take out glyphs gradually until you find the minimal amount of glyphs you need to use.

Goodluck, George