RAD Studio 10.4.1 is now available! Learn more. Looking for discounts? Visit our Special Offers page!
News

True Type Font Iconography for Android and iOS Apps

Author: Brian Alexakis

.

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.0fonts 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:

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

 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

 

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 .assetsinternal. 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)EmbarcaderoStudio15.0sourcefmx 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

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

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

 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:

 Around line 39:

 And at the end of file around line 282:

 

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

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

 

 


Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Learn More About Upgrading

Related posts
C++

What's New in the GetIt Package Manager - June 2020

C++

RAD Studio 10.4 Now Available, Learn More

C++NewsRAD Studio

Open for Business with 10.4! - May 2020 GM Update

C++DelphiNews

Embarcadero Open Source Project Sponsorship

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

IN THE ARTICLES