Tutorial: Use custom Fonts in your Titanium app (OSX + iOS)

Hi everyone! In this straightforward tutorial I’m going to show you how you can simply put any TTF or OTF font in your Appcelerator Titanium app so your texts look gorgeous and can be easily personalised for your next big hit!


Learning about font names

The first thing we need to know before using a custom font is differentiating between the font’s File Name and its Friendly Name. I happen to have a font I really like called Seagram tfb so let’s see how we can easily differentiate its names just by double-clicking it and having it open in Mac OsX’s Font Viewer:

FontNames

That screenshot should be pretty self explanatory even if the case with this font is that the names are the same, that could not be the case with the font you want to use so be sure you are differentiating names the right way.


Getting your app ready to use custom fonts

To get your app ready you should have your tiapp.xml file totally ready or else you may want to repeat the next steps as what we are going to do is build the app at least one time to get the info.plist file wich gets generated when building for iOS Simulator. If you change your tiapp.xml file after doing all steps in this tutorial it may happen that you need a new info.plist file and you will have to edit it again to let it know wich fonts you are adding.

So, first step, get tiapp.xml ready editing what you need for your project and second step, build your app for iOS Simulator.


Using a custom info.plist file

Once you build your app you will have an iphone folder inside your build folder in your project’s root directory. There is where you will find a fresh info.plist file based on your actual tiapp.xml file.

If you copy this info.plist file and place it where your tiapp.xml file is, you will be telling your app to use that specification for every future build. So now we can proceed to edit it and tell the file we have a fancy font we want to use.


Editing your info.plist file

Getting to edit the file couldn’t be easier, just double-click it and you’ll have it open with XCode. Now click the first section on the file and a plus sign will appear to create a sub-section, click that too.

CustomFont01

Search for a sub-section called Fonts provided by application and click it to add it.

CustomFont02

As the last step here, add a new item into the sub-section via its plus sign and edit the item so the text value it contains is the File Name of your font, including its extension. Notice here I put a folder prior to the font, it’s a good practice to do so and be tidy so our font files don’t mix with other resources.

CustomFont03


Clean your project

At this stage we must clean our project in Titanium Studio or Titanium’s Command Line Interface, whatever we are using for our development. This is a must so the next build fully rebuilds our app and not just the last modified files.


Include the font in your Resources folder

Once we have our project clean, the very last thing we have to do so our font is available is adding the font file into our app’s Resources folder, but as we want to be tidy, we will first create a folder called fonts inside Resources and put the font there.


Use the font in your app

Nothing else to do, we can diretcly use our font now as we would do with any of the included device fonts, here is an example to create a label with Seagram tfb, notice in our code we will always be using the font’s Friendly Name.

var label1 = Ti.UI.createLabel({
  fontFamily: "Seagram tfb",
  font: { fontSize:48 },
  text: "I'm using a custom font!"
});

In Closing

That’s pretty much it, hope you find it useful for your app customization!

Cheers.

4 thoughts on “Tutorial: Use custom Fonts in your Titanium app (OSX + iOS)

  1. Hi Andres,

    For an Android app procedure is the very same but putting your fonts in the FONTS folder is a need (not just a recommendation) also, there’s no need for a PLIST file.

    Best regards!

Leave a Reply