Appcelerator Blog

The Leading Resource for All Things Mobile

Adding custom fonts to iPad

0 Flares 0 Flares ×

One of the nice capabilities of the iPad and 3.2 iPhone SDK is the ability to add your own custom fonts to your application. With Titanium 1.2, this is supported but requires you to make a few minor modifications that I thought I’d outline here. Unfortunately, if you scour the web at this point, there’s virtual no documentation on how to do this with the Apple SDK either.

1. First, you’ll need to copy your TTF or OTF font to your application Resources directory. Make sure it’s a font you have the legal right to redistribute.

2. In your project build/iphone/build directory, edit the file named Info.plist.template in your favorite text editor. Add the following to the file near the bottom (it’s XML so be careful).

UIAppFonts

blah.otf

custom titanium font

I named my font blah, but make sure you use the correct filename.

3. Now, to use the new font, create a normal Titanium UI Label and provide your font name that you see in Font Book (see screenshot).

font book

Here’s a code snippet:

var label = Ti.UI.createLabel({

text:"junction regular",

font:{fontSize:98,fontFamily:"junction regular"},

top:10,

width:"auto"

});

win.add(label);

Notice that what you name the font file and what you use for fontFamily is totally not related. You must use the name of the font embedded in the font file when referencing it in Titanium, regardless of what you name it.

In the future, we’re likely going to make this a little easier and cross-platform as more devices support custom fonts.

As an update for those using 1.3+, we’ve changed the way that custom Info.plist files are handled in Titanium. You’ll want to copy the Info.plist that is generated for your project under build/iphone into your project root folder. You can edit this file to add any custom Info.plist changes. From now on, Titanium compiler will always use this Info.plist.

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×

3 Comments

  1. Daryl

    Hi Jeff

    I’m fairly new to javascript and I’m having real difficulties getting the splitview to work properly.

    In your next blog post would you be able to show us how to setup a splitview so we can navigate between masterview and detailview.

    Everything I’ve tried crashes the app.

    Cheers

  2. Thanks Jeff

    Very neat, I’ll test it out now. Does it render equally for both iPad and iPhone?

    Cheers

    M@
    Matt

Comments are closed.

Sign up for updates!

Become a mobile leader. Take the first step to scale mobile innovation throughout your enterprise.
Get in touch
computer and tablet showing Appcelerator software
Start free, grow from there.
0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×