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

Add custom font to iOS and Android mobile App
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?

1 COMMENT

  1. designers like me probably won’t know about all the new capacities these progressions can bring to our foundation. A debt of gratitude is in order for the help!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

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