PhoneGap with Roboto Font

Want to use Google Web Fonts? Check out this post.

Fonts are one of the more subtle things in application design. Choosing the right font for the application can make an amazing difference that users like but don't quite know why. Adding custom fonts like Google's Roboto, to a PhoneGap application isn't difficult, but there are a few gotchas to avoid.

Use TrueType Fonts

With PhoneGap, I normally assume if it will work with the web, it will work in PhoneGap. Usually this is true, however not with fonts. PhoneGap is limited to the browser implementation of the device, most of which still don't support web fonts. But despair not, nearly all support regular old TrueType fonts. So I downloaded the TrueType version of the Roboto font from the Android Design website.

Use Relative Paths

The great debate between relative and absolute paths rages on even in PhoneGap. And PhoneGap adds its own twist to things, absolute paths use its "file:///" format. This is particularly painful since it incorporates the name of the device, which blows cross-platform support away. It is much easier to get things to work right by using relative paths.

Beware the Emulator

For a reason I still don't understand, my emulator would not display the custom font. For a very frustrating hour or so, I kept trying everything I could to get it to work, but it would not. Finally, I put the app on a device and it displayed the custom font without issue.

Only Download What You Need

The final thing to be aware is that fonts can get quite big. The complete set for the Roboto TrueType font is over 2.6 MB in size. Most of your users will download your app over the air and then keep it on the ever shrink space of their sd-card. Discard the fonts parts which are not used in your application. If you don't use 'Condensed', don't include it in your build.

If you need some code to get you started, I have push a sample program which simply displays some text in the Roboto font to my GitHub repo at PGRobotFont.