How to use Google Web Font in an iPhone app built with PhoneGap?

Question

We would like to use Google Web Fonts in a PhoneGap app built for iOS devices, but we would like to host the font files within the app's bundle instead of using the code to dynamically fetch the font over the web.

If the device is offline, the fonts won't be available unless the font files are bundled into the app.

Google offers the ability to download the web fonts, but how are we supposed to reference the local font files inside the HTML app?

Answer 1

we put the font file in .ttf Format somewhere in our assets/www folder.

Declaration:

@font-face {
  font-family: "Droid Serif";
  src: url('fonts/DroidSerif.ttf');/* relative path from the css file */
}

and then use it like this:

.someClass, #someId, someTag{
  font-family: Droid Serif;
}