In this section, you will learn how to use custom fonts in a cross-platform application.
Custom fonts are a quick and easy way to personalize or brand your application. Titanium Mobile supports custom fonts on both iOS and Android. Both platforms support the use of TTF and OTF font files. You'll need to take a couple of extra steps on iOS, and there are differences between platforms in how you identify the fonts. We'll look at all of these particulars.
You will need TTF or OTF font files to ship with your Titanium Mobile project. Depending on your app's license and distribution model, you might need to pay for such use. Or, you might be able to use an open source font. Here are a couple of sources of fonts (there are many others):
- Google WebFonts - free fonts, mostly open source but some licenses for use in commercial projects
- FontSquirrel - freeware fonts licensed for commercial and open source projects
Using the custom font
Once you've identified the font to use, follow these steps:
- Download your chosen font and unzip the package (if necessary).
- Copy the TTF/OTF file to the Resources/fonts/ directory.
If you want to use different fonts on iOS than Android, you can copy those files to Resources/iphone/fonts and Resources/android/fonts instead.
- The code you use varies a bit by platform, as illustrated in the following code sample:
- On Android, build your project and the custom font should show up.
Additional iOS steps
On iOS, you must list custom fonts in your app's Info.plist file.
- Build the project at least once (the font won't work yet).
- Copy build/iphone/Info.plist to the project root folder (where Resources is located).
- Double-click Info.plist to open it in Xcode.
- Right-click a blank area in the list of keys and choose Add Row. From the resulting list, choose Fonts provided by application.
- Expand Fonts provided by application and click in the Value field. Enter the full name of the font file. If you've put the file in the fonts directory as we suggest, make sure to include that path, e.g. /fonts/SpicyRice-Regular.ttf
- Save the file and close Xcode.
- In Studio, clean the project then build it again. This time your custom font should show up.
As noted in the code sample above, you also need to use the "friendly name" for the font, rather than its file name. To determine this name, double-click the TTF/OTF file to open it in Font Book. The font's friendly name is shown in the window's title bar.
A little platform-switching sugar
Building in those if/then statements can make for some hard to read and maintain code. So, here's a little trick pulled from Kevin Whinnery's Tweetanium app. First, include the following function in your app (maybe in your library of helper functions):
With that in place, you can now put the platform-dependent values right in line with the property assignment. Like this:
os() function will take the values you provide for each of the platforms, and return the correct one for the OS on which your code is running. You can use any of the values returned by
Ti.Platform.osname as keys for that function's single argument, as shown above.
Want to try out the sample app we wrote while creating this guide? It includes both a TTF and OTF font and works in both iOS and Android. Download it from here: CustomFonts.zip
You might also want to check out the fonts built into the system before you go installing a custom font. Of course, support varies by OS version and in the case of Android, probably by handset maker and carrier. Here are some links to get you started:
- iOS system fonts
- Android fonts - GitHub repo for current version of Android, older versions won't support all of these
In this section, you learned that custom fonts are a quick and easy way to personalize or brand your application. You learned how to implement custom fonts in both iOS and Android apps.