Embedding font as3

[MatteoLegittimo]

Hi!

Im trying to embed a font in a actionScript project in Flash Builder like this:

package {
     import flash.display.*;
     import flash.text.*;
     
     public class HelloWorldEmbedded extends Sprite {
          
          // Embed the font Verdana
          [Embed(source="Verdana.ttf", fontFamily="Verdana")]
          private var verdana:Class;
          
          public function HelloWorldEmbedded() {
               
               var t:TextField = new TextField();
               
               // Tell Flash Player to use embedded fonts when rendering t's content
               t.embedFonts = true;
               
               t.htmlText = "<FONT FACE='Verdana'>Hello world</FONT>";
               t.text = "Hello World";
               
               addChild(t)
          }
     }
}

But when i debug my application i can't see any text!

This is the link of my project http://www.emmelledesign.it/eas3_fonts_embedding.fxp

Thanks so much!

Matteo

[FeZEC]

i believe you need to register the font to use it.  look into Font.registerFont

    Font.registerFont();

[MatteoLegittimo]

registerFont()

add the font to the global font list.

But in this case the font it's Verdana, it's in my global font list because it's a font system, so no need to register!

When you set

TextField.embedFonts = true;

tell Flash Player to use embedded fonts when rendering TextField's content and not operating system's text render!

[Andrei1-bKoviI]

The way you try to embed it assumes that Verdana.ttf is in the same folder as the root application. Also you need to link a static variable to this font.

Try (depending on your directory structure):

[Embed(source = 'C:\WINDOWS\Fonts\Verdana.ttf', fontName = "_verdana", mimeType = "application/x-font-truetype")]
private static var Verdana:Class;

OR

[Embed(systemFont = "Verdana", fontName = "_verdana", mimeType = "application/x-font-truetype")]
private static var Verdana:Class;

[MatteoLegittimo]

This line of code in my project:

private var verdana:Class;

it's the variable that will refer to the class that represents the embedded font and it's used only when loading font at runtime.

Of course Verdana.ttf is in the same folder as the root application.

Look at my link, u can download the project!

[Andrei1-bKoviI]

"it's the variable that will refer to the class that represents the  embedded font and it's used only when loading font at runtime."

I am not sure what you mean. Embed metatags are for embedding assets at compilation - not runtime.

Try making variable static.

[MatteoLegittimo]

Still not working!

private var verdana:Class;

Font.registerFont(verdana)

I don't need to register because it's a system font!

[Andrei1-bKoviI]

Oh, just noticed.

Actually your code does embed font. The problem is that you rely on font face in html tag. It doesn't work. You need to set TextFormat to the TextField.

The following works perfectly:

package {
     import flash.display.Sprite;
     import flash.text.TextFieldAutoSize;
     import flash.text.TextField;
     import flash.text.TextFormat;
     import flash.text.AntiAliasType;
     
     public class FontTest extends Sprite {
          [Embed(source="Verdana.TTF", fontFamily="Verdana")] 
          public var font:String;
          public function FontTest() {
               var format:TextFormat = new TextFormat();
               format.font = "Verdana";
               format.color = 0xFF0000;
               format.size = 50;
               var label:TextField = new TextField();
               label.embedFonts = true;
               label.autoSize = TextFieldAutoSize.LEFT;
               label.antiAliasType = AntiAliasType.ADVANCED;
               label.defaultTextFormat = format;
               label.htmlText = "<p>Hello world!</p>";
               addChild(label);
       }
    }
}

[MatteoLegittimo]

.

[MatteoLegittimo]

Font face works perfectly!

Try if u have time!

package {
     import flash.display.*;
     import flash.text.*;

     public class FontAvailability extends Sprite {
          
          [Embed(source="fontName.ttf", fontFamily="fontName", embedAsCFF="false")]
          private var ClassName:Class;
          
          public function FontAvailability() {
               
               var t:TextField = new TextField();
               t.embedFonts = true;
               t.htmlText = "<FONT SIZE='33' FACE='fontName'>Hello world</FONT>";
               addChild(t)
          }
     }
}

[Andrei1-bKoviI]

Thanks. I guess with SDK 4 face works now. Doesn't work with SDK 3.5.

I will play with it (or, at least, remember, hopefully, for the future references).

[MatteoLegittimo]

No!

It works in 3.5 to!

Try it!

[Andrei1-bKoviI]

You are right. It does.

[Andrei1-bKoviI]

Just got rusty on fonts.

In order to use embedded fonts with html tags you have to use StyleSheet. The following works without setting TextFormat:

package {
     import flash.display.Sprite;
     import flash.text.AntiAliasType;
     import flash.text.StyleSheet;
     import flash.text.TextField;
     import flash.text.TextFieldAutoSize;
     
     public class FontTest extends Sprite {
          [Embed(source="Verdana.TTF", fontFamily="Verdana")] 
          public var verdana:String;
          [Embed(source="ARIAL.TTF", fontFamily="Arial")] 
          public var arial:String;
          public function FontTest() {
               var style:StyleSheet = new StyleSheet();
               style.setStyle(".redFont", { fontFamily: "Verdana", fontSize: 50, color: "#ff0000" } );
               style.setStyle(".greenFont", { fontFamily: "Arial", fontSize: 30, color: "#008000"} );
               var label:TextField = new TextField();
               label.embedFonts = true;
               label.autoSize = TextFieldAutoSize.LEFT;
               label.antiAliasType = AntiAliasType.ADVANCED;
               label.styleSheet = style;
               label.htmlText = "<p><span class='redFont'>Hello world!</span><span class='greenFont'> It works!</span></p>";
               addChild(label);
       }
    }
}

[MatteoLegittimo]

Is working the first example that u write?

I tried but still don't work!

If u download my example, i did a method call showEmbeddedFonts () that show the embedded font! And it's embedding the font but i cant see the text!

You can formatt text with emedded font in different way:

// Set the font with a TextFormat object
var format:TextFormat = new TextFormat();
format.font = "Verdana";
var t:TextField = new TextField();
t.embedFonts = true;
t.defaultTextFormat = format;
t.text = "hello world";
               
// Or set the font with HTML
var t:TextField = new TextField();
t.embedFonts = true;
t.htmlText = "<FONT FACE='Verdana'>Hello world</FONT>";


// Or set the font with CSS
var styleSheet:StyleSheet = new StyleSheet();
var pStyle:Object = new Object();
pStyle.fontFamily = "Verdana";
styleSheet.setStyle("p", pStyle);
var t:TextField = new TextField();
t.embedFonts = true;
// Assign styleSheet before assigning htmlText!
t.styleSheet = styleSheet; 
t.htmlText = "<p>hello world</p>";

[Andrei1-bKoviI]

Both my examples work perfectly. Again, <font> tag with font face in htmlText doesn't work.

Sorry, but I don't download projects from the forum.

[MatteoLegittimo]

Strage,

because my last post it's from Colin Moock EssentialActionScript 3.0 page 742.

This is my project:

HelloWorld class:

package {
     import flash.display.*;
     import flash.text.*;
     
     // This class demonstrates how to format text using embedded fonts.
     // The fonts, themselves, are embedded in the class FontEmbedder.
     public class HelloWorld extends Sprite {
          // Make a reference to the class that embeds the fonts for this 
          // application. This reference causes the class and, by extension, its 
          // fonts to be compiled into the .swf file.
          FontEmbedder;
          
          public function HelloWorld () {
               // Create a text field
               var t:TextField = new TextField();
               t.border=true
               
               
               // Tell ActionScript to render this text field using embedded fonts
               t.embedFonts = true;
               
               // Use two variations of Verdana (normal, and bold)
               t.htmlText = "<FONT FACE='Pilgiche'>Hello world</FONT>";
               
               // Enable FlashType (i.e., Saffron) text rendering
               t.antiAliasType = AntiAliasType.ADVANCED;
               
               // Add the text field to the display list
               addChild(t);
               
               showEmbeddedFonts ();
          }
          
          // Outputs a list of the currently available embedded fonts
          public function showEmbeddedFonts ():void {
               trace("========Embedded Fonts========");
               var fonts:Array = Font.enumerateFonts();
               fonts.sortOn("fontName", Array.CASEINSENSITIVE);
               for (var i:int = 0; i < fonts.length; i++) {
                    trace(fonts.fontName + ", " + fonts.fontStyle);
               }
          }
          
     }
}

FontEmbedder class:

package {
  // Embeds the fonts for this application
  public class FontEmbedder { 
     
     [Embed(source="assets/Pilgiche.ttf", 
           fontFamily="Pilgiche")]
     private var pilgiche:Class;
  }
}

in assets folder i have Pilgiche.ttf file!

[Andrei1-bKoviI]

Moock uses mx.core package. I am not sure why he does it.  Here are classes that use his approach without referencing to mx.core (they work with Flex compiler). Application class is FontTest:

package  
{
     public class Verdana
     {
          [Embed(source="Verdana.TTF", fontFamily="Verdana")] 
          public var verdana:String;
     }
}

package  
{
     public class Arial
     {
          [Embed(source="CURLZ___.TTF", fontFamily="Arial")] 
          public var arial:String;
     }
}

package  
{
     import flash.display.Sprite;
     import flash.text.AntiAliasType;
     import flash.text.GridFitType;
     import flash.text.StyleSheet;
     import flash.text.TextField;
     import flash.text.TextFieldAutoSize;
     public class FontTestChild extends Sprite
     {
          public function FontTestChild() 
          {
               var style:StyleSheet = new StyleSheet();
               style.setStyle(".redFont", { fontFamily: "Verdana", fontSize: 50, color: "#ff0000" } );
               style.setStyle(".greenFont", { fontFamily: "Arial", fontSize: 30, color: "#008000"} );
               style.setStyle("p", { fontFamily: "Arial", fontSize: 100, color: "#000080"} );
               var label:TextField = new TextField();
               label.embedFonts = true;
               label.autoSize = TextFieldAutoSize.LEFT;
               label.antiAliasType = AntiAliasType.ADVANCED;
               label.gridFitType = GridFitType.PIXEL;
               label.sharpness = -200;
               label.styleSheet = style;
               label.htmlText = "<p>AHA!!! <span class='redFont'>Hello world!</span><span class='greenFont'> It works!</span></p>";
               addChild(label);
          }
     }
}

package {
     import flash.display.Sprite;
     public class FontTest extends Sprite {
          Verdana;
          Arial;
          public function FontTest() {
               var fontTest:FontTestChild = new FontTestChild();
               addChild(fontTest);
       }
    }
}

[MatteoLegittimo]

Im becoming crazy, but still can't see any text!

It's embedded problem for sure because if i comment this line of your code

label.embedFonts = true;

it's working like in my example!

Im using flashBuilder, shoud i do some settings?

Thanks so much for your job!

[Andrei1-bKoviI]

Try to enumerate fonts and see if the fonts you embed are present:

http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/Font.html#enumerateFonts()

Secons, I did have problems with font embedding when using FlashBuilder. I suggest you attempt to embed system fonts - not from the folder in FlashBUilder project. It worked for me in FlashBuilder

[Embed(source = 'C:\WINDOWS\Fonts\Verdana.ttf', fontName = "_verdana", mimeType = "application/x-font-truetype")]
private static var Verdana:Class;

OR

[Embed(systemFont = "Verdana", fontName = "_verdana", mimeType = "application/x-font-truetype")]
private static var Verdana:Class;

I suspect that there are some settings that influence how FlashBuilder handles some assets. Perhaps, on the settings prevents it for copy right reasons.

Other than FlashBuilder environments do not have these problems/restrictions except for the cases when font is corrupted.

[MatteoLegittimo]

in your code i added this method

public function showEmbeddedFonts ():void {

            trace("========Embedded Fonts========");
            var fonts:Array = Font.enumerateFonts();
            fonts.sortOn("fontName", Array.CASEINSENSITIVE);
            for (var i:int = 0; i < fonts.length; i++) {
                trace(fonts.fontName + ", " + fonts.fontStyle);
            }
        }

trace correctly:

========Embedded Fonts========
Arial, regular
Verdana, regular

[Andrei1-bKoviI]

"

trace correctly:

========Embedded Fonts========
Arial, regular
Verdana, regular"

So, fonts are embedded and you need to figure out how you use them in your TextFields.

By the way, what font and backgroung colors do you use? They are not the same, are they?

[MatteoLegittimo]

im using your classes!

like u did!

but still nothing!

It's really strange!

[MatteoLegittimo]

look, this one have same problem!

http://forums.adobe.com/message/3276591#3276591

[MatteoLegittimo]

just add this in the embed tag and it works fine!

All the script was correct!

embedAsCFF="false"

[

Embed(source="c:/windows/fonts/verdana.ttf", fontFamily="Verdana", embedAsCFF="false")]