Archive for August, 2011

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