Skip to main content
February 20, 2013
Question

StageText iOS use Custom Font Tip

  • February 20, 2013
  • 5 replies
  • 7865 views

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.

This topic has been closed for replies.

5 replies

H_Ahrens
Participant
July 25, 2014

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 ?

Colin Holgate
Inspiring
July 25, 2014
H_Ahrens
Participant
July 25, 2014

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 ?

Participant
March 12, 2014

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.

Participant
February 1, 2014

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.

Inspiring
July 22, 2013

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

January 4, 2014

great tip! thanks for sharing!

Zeloslaw
Known Participant
February 21, 2013

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.