API Development

How do I add a custom font to my mobile app for iOS and Android?

Add custom font to iOS and Android mobile App

Dear Geek,

 

I have built a mobile app for iOS and Android using Titanium and I want to embed a custom font that I can use with both iOS and Android. How can I do this without using different code for each platform?

 

—   FONTLESS IN SEATTLE


Dear Fontless,

Adding fonts to your mobile app is a great way to customize your iOS or Android mobile app to match your brand or style.  With just simple easy steps, you can easily add the custom font of your choice to your Titanium mobile app (and be able to reference them from iOS and Android with the same code)!

1. Determine the Postscript name of your custom font.

If you already know the Postscript name of your font, you can skip this step. To do this on Mac OS, double click on your custom font to install it and open it in Font Book.

Open custom font in Font Book

To see detailed info about this font, press  + i

Show custom font details in Font Book

2. Rename font (if necessary) to match Postscript name

If the filename of your custom font already matches the Postscript name, you can skip this step.

The reason for this step is that iOS and Android handle custom fonts differently.

  • iOS references fonts by the Postscript name.
  • Android references fonts by the filename.
Now, since the filename and PostScript name match, you can reference the font from both iOS and Android using the same name!

 

For the example shown above, we would name the font FiraCode-Regular.ttf

3. Copy your custom font into the assets directory of your app

In your Titanium Alloy mobile project, create a directory: /app/assets/fonts and copy font file into this directory.

Copy font to /app/assets/font directory

4. Use the font in your awesome app!

Use the same code for iOS and Android to display the font in both XML views and JavaScript controllers!

XML Views
<Alloy>
    <Label text="This text uses Fira Code Regular" font.fontFamily="FiraCode-Regular" />
</Alloy>
JavaScript Controllers

const label = Ti.UI.createLabel({ 
    text: 'This text uses Fira Code Regular',
    font: {
        fontFamily: 'FiraCode-Regular',
    }});

You can find more information about using custom fonts with Titanium Native mobile apps on the Axway Wiki Documentation page here.

Read another in Brenton’s “Ask a Geek” series: What are the best practices for implementing API authentication?