Embedding Fonts in Flex Mobile Projects

 

Embedded fonts can be tricky. Embedding fonts in Flex mobile projects is slightly trickier. Another developer on the SDK team forwarded me this stackoverflow question to take a look at. There aren’t a ton of font embedding examples out there, so let’s take a quick look.

There are just a few things you need to know about fonts in mobile:

  • All mobile skins, LabelItemRenderer and IconItemRenderer use StyleableTextField (based on TextField) instead of the Flash Text Engine (FTE)
  • The Spark Label component uses FTE
  • StyleableTextField only supports embedded fonts with embedAsCFF=false
  • You have to embed fonts twice, once with embedAsCFF=false and again as embedAsCFF=true, to use fonts in both types of text components
  • Avoid using embedded fonts with editable text (TextInput and TextArea)
The screenshot above shows usage of embedded fonts both in StyleableTextField (ActionBar and the List LabelItemRenderer) as well as FTE (Label).
Here’s the example code below. Notice that I’ve used a different name when using embedAsCFF=true.

Application.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
							xmlns:s="library://ns.adobe.com/flex/spark"
							firstView="views.HomeView">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";

		/* StyleableTextField, regular */
		@font-face {
			src: url("assets/COMIC.TTF");
			fontFamily: "comic";
			embedAsCFF: false;
		}

		/* StyleableTextField, bold */
		@font-face {
			src: url("assets/COMICBD.TTF");
			fontFamily: "comic";
			fontWeight: bold;
			embedAsCFF: false;
		}

		/* Label, regular */
		@font-face {
			src: url("assets/COMIC.TTF");
			fontFamily: "comicCFF";
			embedAsCFF: true;
		}

		/* Label, bold */
		@font-face {
			src: url("assets/COMICBD.TTF");
			fontFamily: "comicCFF";
			fontWeight: bold;
			embedAsCFF: true;
		}

		s|Label
		{
			fontFamily: "comicCFF";
		}

		s|ActionBar
		{
			fontFamily: "comic";
		}

		s|LabelItemRenderer
		{
			fontFamily: "comic";
		}
	</fx:Style>
	<s:actionContent>
		<s:Button label="Button"/>
	</s:actionContent>
</s:ViewNavigatorApplication>

HomeView.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark" title="StylableTextField embedAsCFF=false">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:VGroup width="100%" height="100%">
		<s:Label text="Label embedAsCFF=true, Regular"/>
		<s:Label text="Label embedAsCFF=true, Bold" fontWeight="bold"/>
		<s:List width="100%" height="100%">
			<s:ArrayCollection>
				<fx:String>StylableTextField embedAsCFF=false</fx:String>
				<fx:String>Comic Sans Regular</fx:String>
				<!-- ... -->
		</s:List>
	</s:VGroup>
</s:View>

 

 

Share on Facebook

9 Responses to Embedding Fonts in Flex Mobile Projects

  1. Francisc says:

    Thank you.

  2. Max Vujovic says:

    Works perfectly- thanks for the example!

  3. Thanks Jason 🙂

    I’m not going to say anything about the font choice, other than share a link:
    http://9gag.com/gag/120785

    • Jason San Jose says:

      I only did it to see how long it would take someone to make a Comic Sans joke. You win!

  4. Abdullah says:

    Thank you for the example.

  5. Pingback: Cool Stuff with the Flash Platform - 8/30/2011 | Remote Synthesis

  6. Bryan says:

    Is there a way to specify ranges of character sets or special characters? or does this just embed the entire font set (which could be fairly large for internationalized fonts right?).

    I am trying to create a localized Flex Mobile app, and I am having a difficult time getting special characters like ñ and é to show up in the text. They either don’t show at all, or show up as an empty box.

    any suggestions would be greatly appreciated.

    Thanks! B

  7. Chris Turvey says:

    I had this problem while installing the font in my project:
    exception during transcoding: Unexpected exception encountered while reading font file

    I had to add this line to my compiler arguments in properties:
    -managers flash.fonts.AFEFontManager

    After that was added that I had no issues. Hope that helps someone.

  8. Nice tutorial. Followed it through, and fonts are looking good.

    However, the embedded font is not showing in the action bar title, or on the text in any text inputs/areas. Is there a way around this?