Search code examples
flashactionscript-3fontsstylesheetembedding

Flash AS3 font / stylesheet displaying improperly

Can't figure out for the life of me why this isn't working. I created a swf in flash which contains a font I want to use in conjunction with a stylesheet in a separate swf. The stylesheet and font work fine in another text field which has been placed statically on the stage. However, when I try to dynamically place a text field on the stage, it doesn't work. The only thing that displays is the text with a span of class .gbold.

Here's my code:

function vidLoaded (e:LoaderEvent){ 


        var vidText:TextField = new TextField();

        vidText.autoSize = TextFieldAutoSize.LEFT;
        vidText.x = textX;
        vidText.y = textY;
        vidText.multiline = true;
        vidText.wordWrap = true;
        vidText.width = fieldWidth;
        vidText.height = fieldHeight;
        vidText.textColor = 0xFFFFFF;
        vidText.styleSheet = textStyleSheet;
        vidText.htmlText = project_array[cp].project_content;
        trace (vidText.htmlText);
        vidText.embedFonts = true;

        container.fileHolder.addChildAt(vid,0);
        container.fileHolder.addChildAt(vidText,1); 
    }

The trace of vidText.htmlText confirms that everything is properly wrapped in CDATA tags and appears to be formatted correctly. Here is my stylesheet:

* { font-family:Gotham-Book; color: #ffffff; }
.gbold {font-family:Gotham-Bold;}
html, body { height:100%; background-color: #ffffff;}
body { margin:0; padding:0; overflow:hidden; text-align:center;}
#flashContent { width:100%; height:100%;  }

and here's a trace of vidText.htmlText:

<div class="content"><p>
    <span class="gbold">Lorem ipsum dolor sit amet</span>, consectetur adipiscing elit. Proin venenatis lorem et lorem dapibus eu porta est ornare.</p>

</div>

Anybody have an idea of what I'm doing wrong? I've been stuck on this for waaaay too long.

Solution

  • You're using embedded fonts, and the Gotham-Book font isn't properly embedded. Gotham-Bold is, which is why only the text with the .gbold shows up. To test if this is the problem, just set "embedFonts = false" and you should see your text show up.

    For the font embedding problem, I wrote a long ass blog post on this not so long ago: http://divillysausages.com/blog/as3_font_embedding_masterclass

    I have to update it with embedding using Stylesheets in Flex, but there should be what you need in there. At the very least, there's some really useful links at the bottom of the post which will give you what you need.