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?

Silicium

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;
}

Forsythe

yup, this is what we ultimately did. – Silicium

Answer 2

I spent a good part of yesterday figuring out how to get the font working in PhoneGap on iOS and the mistake was I had:

src: url('/fonts/DroidSerif.ttf');

changed to:

src: url('../fonts/DroidSerif.ttf');

Maybe this will help someone with the same brainfart.

Impractical