Also having this problem with multiple fonts in flash?

I always had issue’s loading multiple fonts in to flash, so this time I toughed let’s take a bit more time to understand the problem.

The problem I encounter most is: When you have to embed multiple fonts into one text field. For example you have one font that’s called “Universal LT Std Bold Cn” and “Universal LT Std Cn”. Both don’t have font styles except the regular font style. So no bold or anything else is available to you. That’s why there’re different fonts for different styles in the first place.

There are two ways to deal with this problem. One of them is using the shared runtime technique the other technique is done with the EMBED code in actionscript. Depending on how your project is setup, one off the two probably suites you best.

I prefer the EMBED method. First of all, most of the time I don’t work in the Flash IDE but in a actionscript editor like FDT. The EMBED method is easier to use in combination with other classes I think and probably takes less time to implement.

However there is one disadvantage to this technique. You can’t us it in combination with the IDE (compiling with the IDE) unless you add the complete Flex SDK to your IDE library path, by doing this file size will grow.

In this post I am going to explain the EMBED technique. In my next post I will explain the import shared library technique.

First of all you have to create a font folder where you will put your fonts, so the files can be embedded. We also do this because we use SVN and by adding this folder to SVN all other developers don’t have to search for the used fonts in this particular project.

Your project folder should look like this, I know it’s not well organized, swf and fla files should be separated. But sins this project is so small I think it isn’t necessary to put them all in their own folder.

project folder structure

So, next step is to write your own font class. To keep the fonts and the font classes organized we put them all in the font folder.

As you can see I have created this “UniversalLtStd.as” class. In this class you creat the following:

package fonts

{

      import flash.text.Font;

      /**

       * @author iason.vandermeulen

       */

      public class UniversalLtStd

      {

            public static const NAME : String = "UniversLTStd";

            /*    Flex SDK 3.* embed syntax

            [Embed(

             * source='UniversLTStd-Cn.otf',

             * fontName='UniversLTStd',

             * fontWeight='regular',

             * fontStyle='57 Condensed',

             * unicodeRange='U+0000-U+007F,U+0080-U+00FF'

             * )]

             */

         

            // Fleks SDK 4.* embed syntax

            [Embed(

                  source="UniversLTStd-Cn.otf",

                  embedAsCFF="false",

                  fontName="UniversLTStd",

                  fontWeight='regular',

                  mimeType="application/x-font",

                  unicodeRange='U+0000-U+007F,U+0080-U+00FF'

            )]

            public static const _regularClass : Class;

            [Embed(

                  source="UniversLTStd-BoldCn.otf",

                  embedAsCFF="false",

                  fontName="UniversLTStd",

                  fontWeight='bold',

                  mimeType="application/x-font",

                  unicodeRange='U+0000-U+007F,U+0080-U+00FF'

            )]

            public static const _boldClass : Class;

            public static function register() : void

            {

                  Font.registerFont(_regularClass);

                  Font.registerFont(_boldClass);

            }

      }

}

And this is how my main class looks like

package

{

      import fonts.UniversalLtStd;

      import flash.display.MovieClip;

      import flash.text.AntiAliasType;

      import flash.text.TextField;

      import flash.text.TextFieldAutoSize;

      import flash.text.TextFormat;

      /**

       * @author iason.vandermeulen

       */

      public class MainFDT extends MovieClip

      {

            private var _tf : TextField;

            private var _format : TextFormat;

            public function MainFDT()

            {

                  this._format = new TextFormat();

                  this._format.font = UniversalLtStd.NAME;

                  this._format.size = 12;

                  this._format.color = 0x0;          

                  this._tf = new TextField();

                  this._tf.defaultTextFormat = this._format;

                  this._tf.embedFonts = true;

                  this._tf.antiAliasType = AntiAliasType.ADVANCED;

                  this._tf.autoSize = TextFieldAutoSize.LEFT;

                  this._tf.x = 25;

                  this._tf.y = 25;

                  this._tf.height = 200;

                  this._tf.width = 400;

                  this._tf.border = true;

                  this._tf.htmlText = "<b>This is a test</b> and it seems to be working";

                  this.addChild(this._tf);

            }

      }

}

In order to compile this you have to create a launche file in FDT or FB and target the mainFDT class en set the output file to what ever you'd like to call it. My output file is main.swf, most logical.