StageText iOS use Custom Font Tip

[Guest]

A small tip I have been using in some projects (AIR iOS apps) to be able to use custom fonts with StageText.

When using the StageText you cannot use embedded fonts but you can add the font you want to use in the StageText into the app as follows:

1) Add the Font to the InfoAdditions using UIAppFonts:

<iPhone>
    <InfoAdditions><![CDATA[       
            <array>
                <string>1</string>
            </array>    
            <key>UIStatusBarStyle</key>
            <string>UIStatusBarStyleBlackOpaque</string>
            <key>UIAppFonts</key>
            <array>
                <string>MyCustomFont.otf</string>
            </array>
        ]]></InfoAdditions>
    <requestedDisplayResolution>high</requestedDisplayResolution>
</iPhone>

2) Add the font to your app the same way you include any other assets when you package the app, I normally do:

<!-- Include Fonts -->
<arg value="-C" />
<arg value="${fonts.path}" />

3) Now you can set in your StageText instance MyCustomFont as fontFamily.

[Zeloslaw]

Hi,

For a complete list of the fonts supported on the most recent version of iOS, take a look at the iOS Fonts website at http://iosfonts.com.

[Ben_Danis]

Thanks for this, how do you do the same for Android though? Despite my font folder being in the "Package Contents", it doesn't display properly for my stage text elements

[Guest]

great tip! thanks for sharing!

[mfdezpo]

I don't know what I'm doing wrong, but It doesn't work for me.

I include the lines indicated by you in the Application Descriptor

<key>UIAppFonts</key>
            <array>
                <string>Montserrat.ttf</string>
            </array>

, and then put in such view:

<s:TextInput id="editUsuario" text="ABCDEFGH" prompt="Usuario"

             width="100%" height="100%" 

             fontSize="38" 

             textAlign="center"

             contentBackgroundColor="#ffffff"

             verticalCenter="0" 

             horizontalCenter="0"

             fontFamily="Montserrat"   fontWeight="bold"

             enter="botonIniciarSesion_enter()"

             focusIn="editUsuario_focusInHandler(event)"

             focusOut="editUsuario_focusOutHandler(event)"

             />

In css I have:

s|TextInput {

            border-visible: false;

            fontWeight: normal;

            fontStyle: normal;       

            fontSize: 36;

            fontFamily : Verdana;

            textColor : #77C1C3;

            skinClass:ClassReference("spark.skins.mobile.TextInputSkin");

        }

Can you help me, please?????

Best Regards and many Thank you.

[VMCC]

Posting this for my future self who will forget all the iterations it took to get this working with Flash Builder 4.7

1. Make sure that the font file defined in your app.xml is pointing to the correct path.

I had mine in a subfolder src/assets/fonts/MyCustomFont.otf which would require the following in the app.xml

<array>

     <string>/assets/fonts/MyCustomFont.otf</string>

</array>

For reasons I will mention later, I also had the fonts in the root folder src/MyCustomFont.otf which would require the following app.xml

<array>

     <string>MyCustomFont.otf</string>

</array>

2. Make sure to use the font name as Zeloslaw suggested. In my case the font name was slightly different than the font file name.

myStageText.fontFamily = "My Custom Font";

On Windows you can determine this by double-clicking on the font which will give you a font preview and font info.

3. Double-check that the font is being included during build packaging.

Project > Properties > ActionScript Build Packaging > Apple iOS > Package Contents.

Make sure all your fonts have a checkmark to include the files.

Flash Builder has a bug where it will sometimes forget or not see new files added to your source folder.

http://forums.adobe.com/message/5606471

Note that I was getting different Package Contents listed when Exporting Release Build. For some reason the fonts would no longer be listed.

For this reason, I doubled up the fonts, placing them both in the root as well as a subfolder.

[H_Ahrens]

Thank you for this great solution.
This did solve my problems for iOS but not for Android.
Is there any way to embed a custom font for Android with StageText ?

[H_Ahrens]

Hi Colin,

I'm not seeing any text in you're response.
I'm hoping that you have a solution so could you please update you're response ?

[Colin Holgate]

Strange, I see the text in the message in my Sent mailbox. I've come here in a browser to paste what I said:

I’m currently using StageText on an iOS/Android app, and I’ll be trying to embed the font for iOS, because it looks a little wrong when typing. But, on Android it looks correct, without me having to do anything.

[User_Unknow]

and I’ll be trying to embed the font for iOS, because it looks a little wrong when typing

I don't see any issues with iOS and StageText with custom fonts.

[Colin Holgate]

Is that because your custom font is very similar to a built in one? Or have you added the font to the XML, as shown above?

[User_Unknow]

Take a look my blog page http://gamespoweredby.com/blog/2014/01/any-font-in-adobe-air-for-ios-through-stagetext/ there is example. You don't need to know Russian

[Colin Holgate]

Right, so you did add the font to the XML. How do you get an OTF version of a Postscript font? Or can you embed any kind of font?

[User_Unknow]

I don't know ) I get it here Free Font Kaushan Script by Impallari Type | Font Squirrel but in other project I use ttf instead otf

[H_Ahrens]

Hi Anton,

I looked at you're blog and that solution did indeed work for iOS but not for Android.
I've trie'd embedding it via code/swf and every other possibility.
At the moment i'm trying to embed it via AS3:

	[Embed(source="../_assets/OldSansBlackUnderline.otf",
		fontName = "myFont",
		mimeType = "application/x-font-truetype",
		fontWeight="normal",
		fontStyle="normal",
		advancedAntiAliasing="true",
		embedAsCFF="true")]

When i run it on my Mac i can see the font in the StageTextfield but when i have compiled it for Android it uses a default system font.
Does any one have a solution for Android ?  Download link for font: https://github.com/hobu/commonlandunit/blob/master/mapfiles/symbols/OldSansBlackUnderline.ttf?raw=tr...
Further more does any one know if it's possible to display underlined text in a StageTextField ?

[User_Unknow]

I looked at you're blog and that solution did indeed work for iOS but not for Android.

Sure it for iOS because it use <key>UIAppFonts</key> in descriptor. And it's only works well in iOS as well because it's part of native iOS plist.

Android use another own API that can't be compared to iOS You are trying plugin rectangle object in a circle hole It's can't be done this way because you need rect to rect and circle to circle

[H_Ahrens]

Hi Anton,

Yes i know it only works for iOS, but i'm looking for an Android Fix
So if any one has a circle to circle solution, that would be great!

[itlancer]

Feature request for this: Feature#3829000 - [New_Feature_Requirement] [Android] StageText custom/embeded fonts support

Please vote if you are interesting in it.