Embedding fonts in Flex 3.x is usually a source of frustration for me. Using CSS to manage files in an application is a very efficient and relatively seamless process, something I count as one of the advantages to using Flex. Unfortunately, when you want to use custom embedded fonts (from a SWF or an external OpenType or TrueType font) it’s quite difficult to discern the fontFamily name to use in the embed syntax.

While this may seem like a trivial issue, consider the time it takes to implement, compile and test all of the possible fontFamily names for the font Gotham Rounded Medium:

fontFamily: “Gotham Rounded Medium”
fontFamily: “GothamRoundedMedium”
fontFamily: “GothamRounded Medium”
fontFamily: “gotham rounded medium”
fontFamily: “gothamroundedmedium”
fontFamily: “gotham rounded medium”
fontFamily: “GothamRounded-Medium”
fontFamily: “Gotham-Rounded-Medium”
fontFamily: “gothamgounded-medium”

After embedding a font from a SWF using Adobe’s suggested CSS syntax, I find myself having to try several different values for the fontFamily parameter before the compiler stops throwing errors.

After running into this issue yet again today, I found this article by Mark Walters. He includes in his steps for embedding fonts from a SWF a simple for loop that traces the correct name of each embedded font. By adding this loop to the first frame in the timeline of the FLA in which the fonts are embedded, you can discern exactly which fontFamily name to use in your Flex CSS document.

Here’s the loop to place in the FLA (quoted from Mark’s site):

var fontList:Array = Font.enumerateFonts();
for( var i:int=0; i < fontList.length; i++ ) {
    trace( "font: " + fontList[ i ].fontName );
}

Which will trace out something along the lines of:

font: GothamRounded-Medium
font: Rockwell