Use a custom fonts on Axway Titanium™ SDK

Use a custom fonts is really easy with Axway Titanium SDK. But there is one thing you need to pay attention, it’s about the name of your font. There is a little difference between iOS and Android :

Android : load the font by it’s name

iOS : load the font by it’s PostScript name

So, to use only one file font for both Android and iOS, just name your font file with the PostScript name !

For example, download the Anisha font on dafont.com website : http://www.dafont.com/fr/anisha.font . You will get a font named : “Anisha Free.otf”.

Tips: if you download your fonts on https://fonts.google.com, the font’s name is already named by it’s PostScript name.

Create a fonts/ folder into app/assets/ and place your font file into it.

Then, install the font on your system on double click on it and get the PostScript name (open Fonts app on MacOS)

Fonts app on MacOS

The PostScript name here is : AnishaFree-Regular, so you need to name your font with this name.

After that, you can create a class on your app like this :

“.regular”:{
 font : { fontFamily : ‘AnishaFree-Regular’ }
}

To easily maintain your font name, i suggest you to save the font name on your config.json file. That way, i you need to change your font later, you will change only in config.json file :

{
  "global": {
    "FONTS": {
      "regular": "AnishaFree-Regular"
    }
  },
  "env:development": {},
  "env:test": {},
  "env:production": {},
  "os:android": {},
  "os:blackberry": {},
  "os:ios": {},
  "os:mobileweb": {},
  "os:windows": {},
  "dependencies": {}
}

Call the font that way now :

“.regular”:{
 font : { fontFamily : Alloy.CFG.FONTS.regular }
}

BONUS : Use FONT AWESOME in your app

FontAwesome is very useful to remplace many icons images. The benefits is that you didn’t need to create every icons with image (so it’s reduce the size of your app). You can also add the color that you want on each icons !

First : You can download the font here https://fontawesome.com/get-started

Then, add the font in app/assets/fonts folder of your app.

Create a style in the app.tss file :

".fa": {
 font: { fontFamily : 'FontAwesome' }
}

In your view.xml, you can create a user icon (https://fontawesome.com/icons/users?style=solid) like this :

<Label class="fa" text="\uf0c0" />

“f0c0” is the unicode of user icon that you can find here https://fontawesome.com/icons/users?style=solid. Don’t forget to add “\u” before the unicode of the icon.

And, voilà !

About me

I’m a french mobile developper. I use Axway Appcelerator since 2012 and i love it ! I’m the CTO of Squirrel.fr, a mobile agence in Paris and Reunion Island and official partner of Axway.