Dominic Williams

Occasionally useful posts about RIAs, Web scale computing & miscellanea

Flex font embedding with Spark and Halo made easy!

with 7 comments

I’m going to keep this one really brief. There is so much stuff written about fonts and Flex on the Web that the subject seems incredibly complex. It is not(!) and I’m going to quickly outline what I think is the best real-world production approach to take with fonts when using Flash Builder 4.

Firstly, understand that you often *should* use embedded fonts inside your complex Flex projects. The reason is simple: you probably don’t your text to look slightly different depending on what computer it’s running on. For example, a Windows machine and Mac will have different versions of the Arial font. Unless you embed the font your are going to use, you do not know exactly what the font will look like to the user, and the differences can be very significant from the design perspective. Better to embed fonts, so it always looks the same.

So, you need to embed fonts. How do you do this? The most convenient way is to use a style declaration in the root of your project e.g.

       
<fx:Style>
        @font-face {
            font-family: "MyriadPro";
            src: url("assets/MyriadPro-Regular.otf");
            embedAsCFF: true;
	}
</fx:Style>

Notice that we embed as CFF, which provides benefits such as advanced anti-aliasing. But, you howl, Halo (the stuff starting with mx) doesn’t support this! Don’t worry, this is covered in a moment.

Before moving on, we’ll optimize this some by only embedding the characters from the font we are likely to use, which keeps file size down.

<fx:Style>
        @font-face {
            font-family: "MyriadPro";
            src: url("assets/MyriadPro-Regular.otf");
            embedAsCFF: true;
            unicode-range: U+0020-U+007D;
	}
</fx:Style>

So now everything looks the same on each system, perhaps we have been able to use an exotic font, and we haven’t blown our SWF file size up too much. But there’s a problem, Halo’s mx controls show blank spaces where text should be.

No worries, this is simple too. You just need to override the class of the text renderer object used by the Halo controls.

<fx:Style>
        @namespace mx "library://ns.adobe.com/flex/mx";
        @font-face {
            font-family: "MyriadPro";
            src: url("assets/MyriadPro-Regular.otf");
            embedAsCFF: true;
            unicode-range=U+0020-U+007D;
	}
        mx|Alert, mx|Button, mx|Form, mx|FormHeading, mx|FormItem, mx|FormItemLabel {
            font-family: MyriadPro;
            textFieldClass: ClassReference("mx.core.UIFTETextField");
	}
</fx:Style>

Nice! There you have your production font strategy. Of course, the more of those sorry old mx controls you are using, the longer your list of mx|,… will be :)

About these ads

Written by dominicwilliams

May 27, 2010 at 12:23 pm

7 Responses

Subscribe to comments with RSS.

  1. Hey, thanks, you saved me a lot of hassle!

    As an added notes, this also works:

    mx|global
    {
    textFieldClass: ClassReference(“mx.core.UIFTETextField”);
    }

    It saves you the trouble of having to add each mx component, and then you can just apply individual styles to each thing as usual, like:

    .title
    {
    font-family: “MyriadPro”;
    }

    Aeldron

    July 7, 2010 at 4:15 pm

  2. I take it back what I said on my previous comment. You do need to embed every single component you use as you said:
    mx|Alert, mx|Button, mx|Form, mx|FormHeading, mx|FormItem, mx|FormItemLabel…

    Aeldron

    July 7, 2010 at 8:07 pm

    • this approach does not seem to apply to mx|ComboBox and mx|DataGrid. Is there solution for these 2 components?

      anur

      October 1, 2010 at 3:13 pm

  3. [...] this about 8-9 months ago we decided to move on…I recently had to come back to it and found this helpful link that allowed me to do the following to get this working as [...]

  4. Thanks a lot! You saved my day.

    Philip

    April 1, 2011 at 12:11 pm

  5. Hey, thanks!!!!! You really saved my day! Been staring at these disapperaring form labels for a while.

    Bal

    April 6, 2011 at 10:49 pm


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 68 other followers

%d bloggers like this: