Embedding (CFF) fonts

If you are building a Flex4 application and want to use the cool CFF fonts you will be frustrated pretty soon. 

Strangely I didn't seem to have any problems with embedding Fonts with Flexmojos3 but with Flexmojos4 I didn't get any errors or warnings, I simply couldn't use the fonts.

Here comes the code in my CSS file that was enough to embed my fonts with Flexmojos3:

@font-face {
    src:            url("/assets/fonts/HypatiaSansPro-Semibold.otf");
    font-family:    "MainFont";
    font-weight:     normal;
    advanced-anti-aliasing: true;
    embedAsCFF:     true;
    /* Embeding fonts as CFF makes it nessecary to set the textFieldClass of mx:Labels to "mx.core.UIFTETextField" */
}

As I mentioned, with Flexmojos4 I was no longer able to use my fonts but there were no errors or warnings to get me on the right track.

Most tutorials on the web said, that you need to add some dependencies to the plugin and manually install some Flex SDK jars as these are not provided per default. This seems not to be true anymore. I could perfectly integrate my custom fonts without installing a single jar-file to my repository.

The second step most tuorials tell you, is to add a configuration option to your flexmojos plugin section:

<fonts>
           <managers>
              <manager>flash.fonts.AFEFontManager</manager>
              <manager>flash.fonts.JREFontManager</manager>
              <manager>flash.fonts.BatikFontManager</manager>
           </managers>
       </fonts>

But unfortunately they are all missing the one manager you need (CFFFontManager). My builds work perfectly without these 3 managers:
Use this instead:

<fonts>
           <managers>
              <manager>flash.fonts.CFFFontManager</manager>
           </managers>
       </fonts>

Using MX components with CFF Fonts

I remember that mx components were not able to use my CFF fonts without modification. In Flashbuilder automatically a special CSS file (MXFTEText.css) is included into the build that exchanges the textLabelClass to use a CFF capable implementation. Here is an example of its content:

mx|Label
{
	textFieldClass: ClassReference("mx.core.UIFTETextField");
}

Problems Embedding Fonts

I had some problems embedding Fonts in my Skin project as FM4 was throwing "unable to transcode" errors at me. I had two reasons for the Transcoding from failing:

  1. I configured the font embedding wrong: If you embed a font with weight "bold" for example and the font-file doesn't contain a bold font, then I got errors ... you have to exactly embed the font the way it is provided by the font-file.
  2. I explicitly configured the version of the flex sdk. In this case I needed to add a plugin-dependency to a module called flexmojos-threadlocaltoolkit-wrapper BEFORE the dependency to the sdk. I describe this in the page ?Embedding (CFF) fonts in the section "Things I recommend to change".