Embedded Fonts Linkage problem with CSS

[headinapan]

Hey,

I've been struggling with an odd issue...

I have embedded all of my different fonts in the library - (ie Regular, Bold, Semibold versions)

When I try to call those fonts via their linkage name from my CSS file, they just don't appear at all.. NO test appears in fact.

I can only get them to appear when I refer to them by their "real" name ie NOT: ChapProSemBold - Only: Chaparral Pro Semibold

I can only get the variations of the font appearing together when embedfonts = false, but then the text looks crappy - even with "antiAliasType = AntiAliasType.ADVANCED".

When I set embedfonts = true, the type looks good - but I don't get the variations anymore! I just get the standard font - not my bold or semibold.

Can anyone help?

My CSS is:


p {

font-size: 14px;
font-family:Chaparral Pro;
color: #5F6062;
line-height:16px;

}

b {
font-size: 16px;
font-family:Chaparral Pro Semibold;
font-weight:bold;
color: #fbb033;
}



a:link {
text-decoration: none;
color: #fbb033;
}
a:hover {
color: #fbb033;
text-decoration: none;
}


And I am calling my CSS in the usual markup:

var req:URLRequest = new URLRequest("styles/bodyStyle.css");
loader.load(req);
//event handlers for loading in CSS loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
loader.addEventListener(Event.COMPLETE, cssCompleteHandler);

[Navee]

Hi, I could not tell what the issue was right away because the methods you're using to create the CSS object were not in the script...nonetheless open a new AS3 document and use the following code. It will generate a dynamic textfield and place some dummy text inside. Place a copy of your CSS file in the root directory of this new project for testing purposes. It works for me, but I don't have that specific font in semi-old at least.

You can use your font symbols by the name you identify them by, but you must make sure you set them up in your linkage AND most importantly call the Font Constructor and the new (keyword) your font name.

Note the URLLoader instance and constructor and proper CSS loading routine. Another thing worth noting is the actual location of the textfield object ($text.htmlText = $text_body;) is within the COMPLETE handler function OnCSS. It could have initially been set earlier in the code. Why not? Because you want to wait until the stylesheet is loaded before you present the text. In other words, you would not want the user to see the unformatted text and suddenly appear styled after the COMPLETE event.



var $text_body:String = "Testing Your CSS! All the text here is being added <span class='b'>dynamically to dynamically</span> created <p>text fields are always on the <a href='#'>verge</a> of doing something they have <a href='#'>no business</a> doing.</p>";

var myFont:Font = new ChaparralPro();
var myFormat:TextFormat = new TextFormat();
myFormat.font = myFont.fontName;
myFormat.size = 14;

var $container:Sprite = new Sprite();
$container.x = 30;
$container.y = 150;
addChild($container);

var $text:TextField = new TextField();
$text.width = 350;
$text.wordWrap = true;
$text.defaultTextFormat = myFormat;
$text.embedFonts = true;
$text.autoSize = TextFieldAutoSize.LEFT;
$container.addChild($text);

var $css_load:URLLoader = new URLLoader();
$css_load.load(new URLRequest("bodyStyle.css"));
$css_load.addEventListener(Event.COMPLETE, OnCSS);

function OnCSS(evt:Event):void {
var $css:StyleSheet = new StyleSheet();
$css.parseCSS(URLLoader(evt.target).data);
$text.styleSheet = $css;
$text.htmlText = $text_body;
}


Hope this helps,


Cheers