How to add custom font in PhoneGap

Question

I am trying to add a custom font to my PhoneGap application and I tried two methods I found on the internet and they don't work using PhoneGap 3 and Xcode 5.

• Using font-face method using CSS:

   @font-face { font-family: 'Droid Arabic Kufi'; src: url('fonts/DroidKufi-Regular.ttf'); } body { font-family: 'Droid Arabic Kufi'; } 

  Using Xcode info.plist file method:

  1. First I added DroidKufi-Regular.ttf in the project resources folder.

  2. Then added a new row in the info.plist file called Fonts provided by application with item called DroidKufi-Regular.ttf . and still doesn't work.

  3. So, in viewDidLoad method I added this line of code [UIFont fontWithName:@"Droid Arabic Kufi" size:10.0]; but still not working.

Answer 1

This works in my app. 'fonts' is a subdirectory in the directory with the css file.

@font-face {
    font-family: 'grenouille';
    src: url('fonts/grenouille.eot');
    src: local('☺'), url('fonts/grenouille.woff') format('woff'), url('fonts/grenouille.ttf') format('truetype'), url('fonts/grenouille.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family: "grenouille";
}

I'm not sure that you need all these files, but you can generate them using the site http://www.fontsquirrel.com/tools/webfont-generator

If you still have problems, check letter cases, remove spaces from names and try to apply a preinstalled font family to be sure that your problem is the font and not the css rules.