This article extends “Embedding fonts bold vs. black” post. Sometimes it may be tricky to guess correct fontName with your font. Compilator works with different fontNames than what Flash IDE shows you. Lets say you want to embed fonts from .swf (library) file into .css file. In Flash IDE, properties panel for TextInput, character Family and Style stand for something totaly different that what you gonna need with correct fontName value later in .css file. In fact solution is very easy.

For example, for Helvetica font family, Flash IDE offers one Family called “Helvetica Neue LT Pro” with different styles “65 Medium”, “55 Roman”:

Here comes the tricky part. When it comes to .css you may want to use:

@font-face
{
    src: url("assets/fonts.swf");
    fontFamily: "Helvetica Neue LT Pro";
    fontStyle: "65 Medium";
}

… but compiler would stop you saying:

font 'Helvetica Neue LT Pro' with normal weight and regular style not found
Unable to transcode assets/fonts.swf

… or something similar.

So how to find out what is the correct fontFamily for compilator? Thankfully, there is an easy help. Locate your .ttf (.otf) file and open it. In my case I have used default system font viewer (Windows XP), but I am sure you can use any solid font viewer application:

…and there you find your familyName. Now you can embed fonts:

@font-face
{
    src: url("assets/fonts.swf");
    fontFamily: "HelveticaNeueLT Pro 65 Md";
}

@font-face
{
    src: url("assets/fonts.swf");
    fontFamily: "HelveticaNeueLT Pro 55 Roman";
    fontWeight: bold;
}

Notice there is different fontFamily and fontWeight (normal vs. bold) used for each font. If you try to use something else (change fontWeight) with these font-face specifications, compiler would stop you again. The fontFamily thing seems to be clear, but for now the thing with fontWeight remains mystery for me (viewer is not saying a thing about it). Flash IDE font family and style are also suggested somehow mysteriously.

Embedding fonts into flex app can be a tricky things. Lets suggest you need to embed Arial font in both bold and black style. When you open some desktop application using local font list, you notice Arial font family and under this option there is a list of styles. There is a bold and black style in one list so one would guess it is the same thing setting. Well, it is not. When it comes to embedding into flex, the code varies much more…

css embed code for Arial Bold:

@font-face {
    src: local("Arial");
    fontFamily: "ArialBold";
    fontWeight: bold;
}

css embed code for Arial Black:

@font-face {
    src: local("Arial Black");
    fontFamily: "ArialBlack";
}

usage:

<mx:Label fontFamily="ArialBold" fontWeight="bold" text="ArialBold"  />
<mx:Label fontFamily="ArialBlack" text="ArialBlack" />

To get available installed fonts on your system use FontStyleList.