Question

I need to use a custom font with my Cocos2D project. I’ve tried a few techniques, but Cocos2D keeps reporting:

Unable to load font XXX.ttf

Why can’t I get my custom font to work with with Cocos2D?

---

ADDITIONAL INFORMATION

This is a Question+Answer post. This has been a problem that has had me beating my head against a wall all morning. After reading through numerous solutions, across numerous websites, I’ve discovered that an amalgam of all available solutions was necessary to fix this issue.

What has further confounded the problem for some individuals is that you can sometimes get your application to work, perfectly, in the simulator but it won’t work on your iOS device! Furthermore, I have also read of a couple instances where users have had the opposite problem where the device will work properly, but not the simulator. I haven’t experienced the latter problem but I believe following these instructions will help solve this issue, for everyone.

If you’ve had this problem, solved it yourself and I missed a step, please post a comment. I’ll update my post to include any additional details.

Answer 1

Here are the necessary steps you should follow to add a font to your project.

1. Install your new, custom font into Font Book. I’m assuming you know how to do this and I shall leave further explanation of this step to Google.

2. Next, from within Font Book, find your freshly installed font. Select the font and click on the Information button on the Font Book toolbar.

   

3. Take note of the PostScript name property. This must be the name of your font file (excluding the font file extension) within your application.

   NOTE: I’ve read of some users having trouble using custom fonts with names including spaces. I’m not sure if this was just an error on the user’s part because I’m not sure if PostScript names can even include spaces. Regardless, if your PostScript name includes a space, you may still have trouble accessing your font.

   If this is your problem, you may want to see if you can acquire a tool that will let you change the PostScript name property of your font. You will need to do this before you add the file to your XCode project. Otherwise, I assume that your custom font will work in the simulator, but not on your iOS device.

4. Open your XCode project and drag & drop your font, from Finder, into your project resource folder. Before clicking the Finish button on the Add File screen, be sure to you check the checkbox to copy the font to the destination group’s folder.

   

5. After adding your font to your resources folder. Verify that the name of the font is the same as the PostScript name that was mentioned in step #3. The name must also include any special characters such as hyphens or underscores.

   If your font is not named the same as the PostScript name (excluding the file extension,) you will not be able to access this font from your iOS device, so rename the file in your project. In the case of my sample font, I needed to rename NES.ttf to Nintendo-NES-Font.ttf

6. Next, open the project’s info.plist file. From the plist designer screen, right-click the first line of the plist and select Add Row. This will bring up a key selection box. Select the “Fonts provided by application” array option.

   

7. The new array in the plist will automatically add an empty, “Item 0”. Set the string property to the name of your font file. In the case of my example, the property value should be Nintendo-NES-Font.ttf.

8. Next, go to the Build Phases screen for your XCode project. From here, verify that your font file is in the list of Copy Bundle Resources group. If it is not, add the file in your project directory.

That’s it! Your font is now in your project and can be used by CClabelTTF labels. Remember, when you create a label, specify the font by the PostScript name. You do not have to include the “.ttf” file extension. The sample code below shows how to create a label with a custom font.

CCLabelTTF* label = [CCLabelTTF labelWithString:@"Your label text here." 
                                       fontName:@"Nintendo-NES-Font"
                                       fontSize:16];

Add the label as a child to your layer and it will display using your custom font!

And, here is our results: