loading...
Cover image for How do I add a custom font to my mobile app for iOS and Android? [SOLVED]

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

brentonhouse profile image Brenton House ・2 min read

Ask-a-Geek: Answers to Frequently asked API and Mobile Questions (6 Part Series)

1) How do I add a custom font to my mobile app for iOS and Android? [SOLVED] 2) What are the best practices for architecting API authentication? 3 ... 4 3) API-First, Mobile-First, Design-First... How do I know where to start?? 4) How do I take a screenshot inside mobile app for iOS and Android? 5) How can my Titanium iOS app detect that a screenshot has been taken? 6) How do I add the Star Wars intro to my iOS and Android mobile apps?

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 a 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 because 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 font in 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.

About Brenton House
With 25 years of experience in the development world, Brenton House leads Developer Relations for Axway's API and mobile products, He has worked closely with many clients across various industries including broadcasting, advertising, retail, financial services, transportation, publishing, supply chain, and non-profits. Brenton's passion for everything API and mobile combined with his strategy and design experience, has enabled him to help developers create captivating products that inspire and delight audiences.

Ask-a-Geek: Answers to Frequently asked API and Mobile Questions (6 Part Series)

1) How do I add a custom font to my mobile app for iOS and Android? [SOLVED] 2) What are the best practices for architecting API authentication? 3 ... 4 3) API-First, Mobile-First, Design-First... How do I know where to start?? 4) How do I take a screenshot inside mobile app for iOS and Android? 5) How can my Titanium iOS app detect that a screenshot has been taken? 6) How do I add the Star Wars intro to my iOS and Android mobile apps?

Posted on Apr 15 by:

brentonhouse profile

Brenton House

@brentonhouse

API and Mobile Strategist with 25+ years in dev community. Head #DevRel Geek at Axway and host of Breaking the Build YouTube series.

Discussion

markdown guide