MotoCMS Blog

Embedding Fonts in Moto CMS Website: Examples, Pitfalls and Best Practices

Tina Zennand

If you are a Moto CMS user, you must know that you are not limited with the standard set of fonts already integrated into your Flash CMS website. You can easily embed additional fonts into your Moto Flash CMS by means of the intuitive Fonts Manager tool.

We have already touched the topic of adding unique fonts to the control panel in our previous posts. Today we are going to describe the process more detailed. Of course, you are familiar with Moto CMS Online Font Creator, an advanced online application that allows you to convert font files (*.ttf and *.otf) into Flash format (*.swf). This innovative solution works on the basis of Adobe Flex SDK (a software development kit released by Adobe Systems for the development and deployment of cross-platform rich Internet applications). Now you have an opportunity to follow all the way of embedding a font in a Flash CMS website.

Today we will also discuss the benefits and drawbacks of the embedded fonts. In addition, we are going to talk about such important and barest issues for many Moto CMS users and other Flash website owners as font compilation errors, the reasons why Flex SDK throws them and the ways of making the font compilation process smooth.

In conclusion, we will give you a script that allows you to use a font embedded in the Flash file generated by the Online Font Creator. You will learn how to use a font from a Flash file.

Contents

The embedded fonts benefits and drawbacks

If you embed a font, this means the font’s constant availability for Flash Player while your application is running, and you don’t have to worry about the font missing.

When you embed a font, you will get such benefits as

– The font is not required to be installed.
– The embedded fonts can be faded, rotated, etc.
– Due to their smooth edges, the anti-aliased embedded fonts are better for a reader’s eye.
– When you embed a font, you can reach great text rendering in Flash files by using the advanced anti-aliasing info.

However, an embedded font is not always the best choice. Here are some drawbacks:

– You can embed fonts in *.ttf and *.otf format. If you wish to embed such fonts as, for example, Type 1 PostScript fonts, you will need to embed the font in a *.swf file you have created with Flash (or *.swf font utility), and then embed the *.swf file in your application.
– The embedded fonts make the file size larger therefore it takes more time to download.
– In order to use MX controls in Flex 4 applications, you will probably have to paste some extra code, etc.

How to add a custom font to your Moto CMS website

So, you like a font and want to use it for your Flash CMS website. If your font is in *.ttf or *.otf format, you need to convert it to *.swf. With Online Font Creator powered by Moto CMS it is easy:

1. Open Preferences – Fonts Manager – Create Font;

The Online Font Creator window will open. To add a font you need to click on the “Add fonts” button.

The font will display in the “Online Font Creator” window together with other fonts.

Click on the “Create fonts” button of the “Online Fonts Creator” window.

The compilation process will start:

When it is finished, you will see the following:

The “Opening Fonts” window will start automatically and you will be able to save the zip file. Or you can click on the “Download” button to start the downloading process.

Now the font is ready for adding to the control panel.

2. To add the font to the control panel go to Preferences – Fonts Manager – Add New Font

The “Add Font” window will open; you will need to select the compiled *.swf file from the “Select File” window. Also, there is an ability to select glyphs for the font. To avoid fonts with the same name but different language you need to select the correct glyphs.

As soon as the necessary parameters are set, click on the “Add” button.

After the new font displayed in the “Fonts Manager” window, click OK.

That’s it – the font is ready for use. It is going to appear in the fonts list.

3. To apply the newly added font select the text object and choose the font from the list of the fonts in the “Properties” section.

Font issues. The way of debugging most of the compilation errors.

Unfortunately, not every font can be as easily compiled as the mentioned above one. Sometimes the Moto CMS Online Font Creator users may collide with some errors occurred during the font compilation process. The occurred errors may be different, but the reason that causes almost all the font compilation errors is the same…

At present we have many font creators at our disposal, with the help of which we can make our own fonts. Also, there are plenty of fonts on the net available for download. Some of them are created properly with all the parameters taken into account and set correctly, and some of them are not. If a font designer has set the parameters correctly while creating the font, the compilation process will run smoothly.

So, the main reason of almost all compilation errors the users collide with is that the metrics which has been initially set in the font is improper.

As we’ve mentioned above, Moto CMS Online Font Creator works on the basis of Adobe Flex SDK. The kit defines an application interface using a set of pre-defined components. If it “doesn’t like” the set of parameters for the font it is compiling, Flex will throw an error as a result.

In order a font to be compiled to Flash format successfully, the proper font parameters should be set. As soon as the *.ttf or *.otf font file is added to the Online Font Creator, you need to open the “Edit Font” window in order to edit the font parameters:

Here you will be able to set the correct font parameters if it is required:

• You can edit the Font Family if necessary.
• You need to set the correct Font Weight (regular, bold or italic).

If the primary defined parameter is not appropriate for the font, Flex SDK will not be able to compile the file (look at your font and try to determine visually what weight should be set for it. Or you can just try to set the font weight by guesswork). In case this parameter is set incorrectly, you will get an error during the compilation process.

• Font Glyphs.

Embedded fonts increase the file size of the application, since the text must contain font outlines for the text. It may increase the download time for your users. If you set the diapason of the font characters to be included into the final Flash file, it will make the file smaller and shorten the download time.

In addition to the above issues regarding font embedding, we would like to mention the fact that some fonts have to be optimized before using them with Flash.

For example, pixel fonts (also known as screen fonts or bitmap fonts) that are beloved by many Moto CMS users, usually demonstrate a good quality and readability. But such fonts have to be used with definite settings and have a number of limitations (you can get more info as for using pixel fonts with Flash by reading the article Using Pixel Fonts with Macromedia Flash).

The example of embedding fonts in any Flash website

Here is an example of script which allows you to use a font embedded into *.swf file generated by Moto CMS Online Font Creator.

package
{
  import flash.display.Loader;
  import flash.display.LoaderInfo;
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.net.URLRequest;
  import flash.text.Font;
  import flash.text.TextField;
  import flash.text.TextFormat;

  public class LoadFontProject extends Sprite
  {
    protected var fontFileName:String = "ComicSansMS.swf";

    public function LoadFontProject()
    {
      var loader:Loader = new Loader();
      loader.contentLoaderInfo.addEventListener(Event.COMPLETE,
        loaderCompleteHandler);
      loader.load(new URLRequest(fontFileName));
    }

    protected function loaderCompleteHandler(event:Event):void
    {
      var loaderInfo:LoaderInfo = event.target as LoaderInfo;
      var motoFontInfoClass:Class =
        loaderInfo.applicationDomain.getDefinition("MotoFontInfo") as Class;

      if (motoFontInfoClass)
      {
        var fontName:String = motoFontInfoClass.FONT_NAME;
        var definitionName:String = motoFontInfoClass.FONT_CLASS;

        var fontClass:Class = loaderInfo.applicationDomain.getDefinition(
          definitionName) as Class;

        for (var j:uint = 0; j < fontClass.classes.length; j++)
        {
          Font.registerFont(fontClass.classes[j]);
        }

        trace("Font name: " + fontName);
      }

      var textField:TextField = new TextField();
      var textFormat:TextFormat = textField.defaultTextFormat;

      textFormat.font = fontName;
      textField.defaultTextFormat = textFormat;

      textField.embedFonts = true;
      textField.text = "Sample text";

      addChild(textField);
    }

  }
}

Let’s consider the script. We specify the Flash font file name at the beginning.
protected var fontFileName:String = "ComicSansMS.swf";

Then we create a loader which will load the specified Flash file and call method loaderCompleteHandler when finished.
public function LoadFontProject()
{
  var loader:Loader = new Loader();
  loader.contentLoaderInfo.addEventListener(Event.COMPLETE,
    loaderCompleteHandler);
  loader.load(new URLRequest(fontFileName));
}

Now we get the MotoFontInfo Class from the loaded *.swf font file.
var loaderInfo:LoaderInfo = event.target as LoaderInfo;
var motoFontInfoClass:Class =
  loaderInfo.applicationDomain.getDefinition("MotoFontInfo") as Class;

MotoFontInfo is the class which is added to every *.swf font file generated by the Online Font Creator. We can use it to get information about the font. In the next step we get the font Name.
var fontName:String = motoFontInfoClass.FONT_NAME;

*.swf font file also contains a class which has an array of font styles (e.g. bold, italic). We get Font Class name and then get this Class from the *.swf file.
var definitionName:String = motoFontInfoClass.FONT_CLASS;
var fontClass:Class = loaderInfo.applicationDomain.getDefinition(
  definitionName) as Class;

Then we use a loop to collect all the font styles registered in the class.
for (var j:uint = 0; j < fontClass.classes.length; j++)
{
  Font.registerFont(fontClass.classes[j]);
}

In the end of the script we create a new text field to demonstrate the extracted font.

This code can be used for embedding fonts in any Flash website (not only Moto CMS based).

Useful Related Links: