How can I add a font to my Cocos2D iOS project and use it with a CCLabelTTF?

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

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: