Using Google Fonts in a PhoneGap App
Want to use Android's Roboto Font? Check this post.
Often we developers under-estimate the value that a proper font adds to the look and feel of our apps. We are usually OK with using the system font. The problem with doing this in a PhoneGap app is that the system font can look very different from one device to the next, heck it is can be different from one version of the operating system to the next, like the change from iOS 6 to 7. So simply depending on the system font may not be a good idea.
Fonts, like anything of value, are not free. While they can be reasonably priced, if you are an indie developer even the most reasonably priced font can seem expensive. Luckily there is Google Fonts. Google has gathered a great collection of free to use fonts. Now normally you would simply link to these fonts in your web site and be done with it. You could do this in a PhoneGap app also, but that would not be an ideal user experience. A PhoneGap app should not be overly reliant on the Internet and the precious milliseconds it takes for the font to download to the user's device may be too much for many users. But you can download the font and embed it in your application. That way you can have a good looking UI which is also fast.
Google gives us three different ways to access a font from the Internet: <link>, @import, and JavaScript, but no way to directly download it. So I am not sure if this is kosher, but I can't think of a logical reason why it would not be.
1. Select your font
The first thing that you need to do is select your font. Head over to Google Fonts. Type the name of the font type or style that you are interested in. Once you have found the font, click the "Add to Collection" button. Then click the "Use" button located in the lower right hand part of the page. Then choose your styles and extra character sets that you may need.
2. Get the @import info for your font
Scroll down to the "3. Add this code to your website:" section and click the @import tab. Copy the URL from the @import statement be sure to include the entire link including "http://" up to the but not including the closing parenthesis.
3. View the download code
Copy the URL to your browser and hit return/enter. In Chrome this show the @font-face statement page in the browser. I am not sure if this will work the same in other browsers, if it doesn't please try it in Chrome. From here you need two things: the statement itself and the URL for the actual font. Copy the URL from the "src:" line to another browser tab. Be sure to include everything from the "http://" up to the ".woff" extension.
4. Download and rename the font
Paste the URL into the another browser tab and press return/enter. This will cause the font to download to your computer. At this point it will have really long and funky name. I suggest changing the name to something more human friendly like the name indicated by the local attribute of the "src:" line.
local('SourceSansPro-ExtraLight')
5. Add the font to your app
Now copy the font into your app. I usually put all of my fonts together in a font directory.
6. Add the font to your CSS
Add the font to your CSS file. The @font-face statement gives us all of the information we need for the CSS file. Copy all of the information from the @font-face page to the top of your CSS file. Remove the local attributes from the "src:" line and change the URL so that it is a relative path to your font file. Mines looks like this:
src: url('../font/SourceSansPro-ExtraLight.woff') format('woff');
Here is a screen shot of my CSS modifications and my apps directory layout:
Summary
The screen shot at the top of the article shows how my app, which is a PhoneGap clone of the iPhone calculator looks with the addition of the Google Font: Source Sans Pro - Extra light. The one below shows how it looks without any font specified. I think it makes it look a helluva lot better.
