True Type Font Iconography for Android and iOS Apps

Posted by on in Tips, Tricks and Techniques

This blog post outlines the steps needed to build a multi-device Android and iOS application that uses a true type font, like Font Awesome, for the purpose of iconography. Using a font for icons has advantages over using raster image files in that they are light weight and vector based so they scale up nicely to high resolutions.

These instructions work for both C++ and Object Pascal projects for the iOS and Android platforms

screenshot

.

Download Project Files

Download the project files.

 

How to Deploy a Custom True Type Font

First create a new Multi Device Application in either C++ or Object Pascal.

Save the project to a folder on your filesystem.

From the FontAwesome downloaded archive, extract fontawesome-webfont.ttf from the \font-awesome-4.3.0\fonts\ folder to the root of your project folder.

Rename fontawesome-webfont.ttf to FontAwesome.ttf

Install FontAwesome.ttf to your operating system so the font will show up in the IDE.

The string value set for any TextSettings.Font.Family property is case sensitive and has to match the internal, system registered, font name which may be different than the file name of the font (thanks Jerry!). Do not include the the file type extension (.ttf in this case).

Object-Inspector-Font-Family

 

Setting Unicode Values for FontAwesome

There are a few ways to set which icon to use within a component that has a Text property.

Under windows, one can use the Character Map application to copy and paste the character itself into the text property via the Object Inspector.

With CPP, the Text property can be set as such:

SomeLabel->Text = (System::WideChar)(0xf042);

 With Object Pascal, the Text property can be set as such:

SomeLabel.Text := widechar($f042);

 Where f042 is the unicode for a particular icon within the font pack.

The downloadable demo featured at the top fo this post contains two helper files, one for CPP and one for OP that includes variables for each icon within the FontAwesome pack.

  1. FontAwesomeCodes.pas
  2. FontAwesomeCodes.h

Variable names match the name of the icon within the fontpack with underscores replacing dashes. Use these to easily programatically set the icon according to the names shown on the FontAwesome CheatSheet website.

For Example

SomeLabel->Text = fa_ambulance;
SomeLabel.Text = fa_ambulance;

 

Android Settings

Before deploying to the android platform the true type font file must be added to project via the Deployment Manager.

Click Project -> Deployment and set the view to Debug configuration - Android platform

Click the + button and load the FontAwesome.ttf file from the root of your project. Set the Remote Path to .\assets\internal. Triple clicking the Remote Path will allow you to edit the value.

Deployment-Manager-Android

Next copy FMX.FontGlyphs.Android.pas from C:\Program Files (x86)\Embarcadero\Studio\15.0\source\fmx to the root of your project folder.

From the Project Manager window, right click on the name of your project (by default it will be Project1.exe) and click Add... and select  FMX.FontGlyphs.Android.pas from the root of your project folder.

From the Project Manager open FMX.FontGlyphs.Android.pas by double clicking on it.

Make the following edits:

Add System.IOUtils to the uses cluase

uses
  FMX.FontGlyphs, Androidapi.JNI.GraphicsContentViewText, System.IOUtils;

Around line 64, add a new String var named FontFile:

var
  TypefaceFlag: Integer;
  Typeface: JTypeface;
  FamilyName: JString;
  Metrics: JPaint_FontMetricsInt;
  FontFile: string;

Around line 85, comment out Typeface := TJTypeface.JavaClass.create(FamilyName, TypefaceFlag); and add the follow code in its place.

    //Typeface := TJTypeface.JavaClass.create(FamilyName, TypefaceFlag);

    FontFile := TPath.GetDocumentsPath + PathDelim + CurrentSettings.Family + '.ttf';
    if FileExists(FontFile) then
      Typeface := TJTypeface.JavaClass.createFromFile(StringToJString(FontFile))
    else
      Typeface := TJTypeface.JavaClass.Create(FamilyName, TypefaceFlag);

 Lastly, we need to ensure that this file only gets loaded when deploying to the Android platform. To ensure this, set IFDEF statements to effectivly create an empty pas file when deploying to any other platform.

Around line 11:

interface
{$IFDEF ANDROID}

 Around line 39:

  end;
{$ENDIF}
implementation
{$IFDEF ANDROID}
uses

 And at the end of file around line 282:

end;
{$ENDIF}
end.

 

iOS Settings

Before deploying to the iOS platform the true type font file and a custom plist file must be added to project via the Deployment Manager.

To create a custom plist file first set the target deployment to iOS Device and Build (Shift+F9) the iOS application to create the /iOSDevice/Debug file structure. From that folder, copy <YourProjectName>.info.plist to the root of your project folder and rename it to TrueTypeFont.info.plist.

Open TrueTypeFont.info.plist in a text editor and add the following within the top level <dict> tag

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

Click Project -> Deployment and set the view to Debug configuration - iOS platform

Click the + button and load the TrueTypeFont.info.plist file from the root of your project. Set the Remote Path to .\ and the Remote Name to info.plist. Triple clicking the Remote Path and Remote Name will allow you to edit the value.

Deselect the default plist file <YourProjectName>.info.plist to ensure that only the custom created plist is deployed.

Click the + button and load the FontAwesome.ttf file from the root of your project. Set the Remote Path to .\. Triple clicking the Remote Path will allow you to edit the value.

Deployment-Manager-iOS2

 

 


Prev
Next

About
Gold User, Rank: 8, Points: 399
Brian Alexakis is a Product Marketing Manager at Embarcadero Technologies. He is focused on leveraging the connected world of technology to build new experiences for the Internet of Things.
http://embarcadero.com

Comments

  • aneal C38818
    aneal C38818 Monday, 7 May 2018

    for ios this *did not work*. However by following the steps to customise info.plist.TemplateiOS.xml the font appeared straight away. See https://community.embarcadero.com/answers/info-plist-ios-uiappfonts-xml-tags-generated-by-project-options-key-pair-value

  • Luke
    Luke Thursday, 19 May 2016

    what can I do for Mac OS X?

  • Cq L9565
    Cq L9565 Tuesday, 26 January 2016

    I can deploy my font file to my iphone6+(IOS 9.2) by your way, and the App also can run at my iPhone(release mode). But DX10 always shows message" Unable to mount developer disk image(e800000e)." my environment is DX10 + Windows 10 and virtual machine Mac OSX. Other program is ok, no warning message. Could you help me? Many thanks.

  • Cq L9565
    Cq L9565 Tuesday, 26 January 2016

    IOS SDK is Xcode 7.2

  • Cq L9565
    Cq L9565 Tuesday, 26 January 2016

    Hi, Brian, I have some problems to ask. I try to deploy my font to my IOS device(iPhone6 plus) by your points. My environment is XE10 + Windows 10, Mac OSX (Xcode 7.2), and I have certificate of IOS developer. I can successfully deploy my app to iPhone, and I also can see the font on the device. But XE10 always shows a warning message when it finished the building work of app(release mode). The message is "Unable to mount developer disk image(e800000e)." I checked my Mac system and Xcode7.2(it's a latest version) in Virtual Machine, they works well. So, I don't know where I am wrong. I worry about it will led other problem when app is released to app store. So, could you help me to analysis this problem. Many thanks.

  • Jerry D9276
    Jerry D9276 Monday, 14 December 2015

    "...and has to match the file name of the font file..." - I'm pretty sure this is incorrect. It's supposed to be the internal name of the font, which can definitely differ from the filename.

  • Jerry D9276
    Jerry D9276 Monday, 14 December 2015

    Indeed, I had already previously registered FontAwesome as "fontawesome-webfont.ttf" long ago, yet shows up as "FontAwesome" as the actual name.

  • Brian Alexakis
    Brian Alexakis Tuesday, 15 December 2015

    Good point, I have updated the copy on the blog post. Thank you!

  • Ashley E8451
    Ashley E8451 Tuesday, 29 September 2015

    Hi! Thanks for the tutorial. On the iOS side, I tried to streamline this by adding the key to Project > Options > [select Target] > right click > Add Key > Key: UIAppFonts, Value: FontAwesome.ttf. However, for the info.plist generated, the string tags show up , but not the array tags . Without the array tags, the font won't show. However, I don't want to copy, paste and rename a new info.plist file every time I build each project (ios32, ios64, iosSimulate debug & release versions). Any ideas?

  • Brian Alexakis
    Brian Alexakis Wednesday, 27 May 2015

    Excellent! I'm glad to help!

  • Manuel M5925
    Manuel M5925 Wednesday, 27 May 2015

    Hi Brian, I have finally succeeded.
    My font Acali and FontAwesome appear in both the emulator and on my mobile.
    The reason was that did not match the file name of the font with the name of the font. I figured it out when I have opened your project and see which compiled perfectly. After a very long time I realized that my name was fontAwesome.ttf file and the name of the true type was FontAwesome (which appears when you open the file in the editor windows fonts), copying the folder internal fontAwesome.ttf was copied (the "f" is at fault) so not compiled correctly. So the solution is to check the name of the source file name and if not so copy it exactly.
    in fact realizing the "internal" folder I changed the name to the right and to compile it worked perfectly.

    I hope you have understood because my English is not very good.

    thank you so much.

  • Brian Alexakis
    Brian Alexakis Tuesday, 26 May 2015

    I'm happy to help provide support regarding this blog post. I personally did not test this method using the android simulator so I'm not sure if there are any issues there.

    Have you tried downloading the project files and compiling/testing the font awesome demo? If you can get that working, perhaps you can compare that project to your own project and discover what you missed.

    Let me know if you have success with the demo files I provide in the above blog post. If you have trouble there, I will take a second look at the demo and ensure I can replicate your problem.

  • Manuel M5925
    Manuel M5925 Tuesday, 26 May 2015

    Hi Brian again, I created a new project with a TLabel and font acali_u6, I've compiled Windows desktop and appears correctly (in osx not because I have not emulator), then I followed the steps of blog again and I have compiled on android in the emulator and the label appears with android font. Why?

    many thanks for your attention.
    Manuel.

  • Brian Alexakis
    Brian Alexakis Tuesday, 26 May 2015

    If you try and compile the application on Windows or OS X as a desktop app, does the font appear correctly? Ensure that the font is installed in your OS and first verify the font is working correctly in your app when deployed to desktop. Once that is established, you can then start debugging why it isn't working on mobile. Let me know!

  • Manuel M5925
    Manuel M5925 Tuesday, 26 May 2015

    Hi Brian, I'm learning to do with xe7 FireMonkey applications and want to make a pre-writing program for children. I need to add a font called "acali_u6"( type ttf). I followed the steps you indicate in your blog including font FontAwesome but to compile the program or the Android emulator or my mobile source icon is displayed. I do not know what happens. I think it may be the FMX.GLYPHS.ANDROID.PAS file that does not recognize the new font as a new source without being of the font family using default android.

    Can you help me?
    thanks for your support.

  • Please login first in order for you to submit comments
  • Page :
  • 1

Check out more tips and tricks in this development video: