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.
Advertisements

2 thoughts on “PhoneGap with Roboto Font

  1. Hi. Do you develop on a PC or a Mac? If PC, is this why you recommend .ttf fonts? Any insight on platform distinctions when it comes to font file formats is appreciated. I'm designing and developing on a Mac. About ready to purchase good fonts, but have found mixed into about whether .otf or .ttf font files are what are need for hybrid apps with PhoneGap built on a Mac. Thanks!

    Like

  2. Hi Troy. Thank you for this article. I stumbled on it while facing a problem with fonts for my PhoneGap app. On Android, custom fonts never work for me. Everything is nice when loading the webapp in the stock browser. But as soon as I compile, fonts won't show up in the app. I am using Adobe Build ans test on a S4 mini. For iOS, it works perfectly. Did you encounter such problems with Android ?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s