How To Add Custom Font In PhoneGap

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 meth

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