Custom fonts in iOS with Phonegap Canvas

Question

I'm trying to make a custom font work in Phonegap under iOS. I followed several tutorials and read all the related question on Stack Overflow and I still can't get it right, even if I double checked everything.

This is the font: http://www.dafont.com/m04fatal-fury.font (the black version)

Step I've taken

Add your custom font files into your project using Xcode as a resource Add a key to your Info.plist file called UIAppFonts. Make this key an array For each font you have, enter the full name of your font file (including the extension) as items to the UIAppFonts array Save Info.plist Now in your application you can simply call [UIFont fontWithName:@"CustomFontName" size:12] to get the custom font to use with your UILabels and UITextViews, etc…

1. Added font into resource folder m04b.ttf
2. Added UIAppFonts array. [0] => 'm04b.ttf'
3. Checked that the actual font file was in the build phase resources
4. ctx.font = '16px M04_FATAL FURY BLACK';

Didn't work.

Tried the postscript name M04_FATAL-FURY-BLACK still no luck. I'm completely lost here I really don't know what to do to debug this error.

Thank you very much for any help. What could be the problem? What could I do to check if everything is getting loaded?

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>UIAppFonts</key>
    <array>
        <string>m04b.ttf</string>
    </array>
    <key>CFBundleDevelopmentRegion</key>
    <string>English</string>
    .....

Answer 1

I had the same problem. I can almost guarantee you're just misspelling the name wrong by a space or dash or something. Put this into viewDidLoad and just search for something similar to your name (the common name.. not the .ttf name).

for (NSString *name in [UIFont familyNames]) {
    NSLog(@"Family name : %@", name);
    for (NSString *font in [UIFont fontNamesForFamilyName:name]) {
        NSLog(@"Font name : %@", font);
    }
}