Use custom fonts in iOS Phonegap build

1
  • hazneliel's avatar
    hazneliel
    published on 18 Dec, 2014 at 17:39
    3 favourites

Index

Tagged

Stats

3,122 visits, 4,584 views

Tools

Share

Translations

This tutorial hasn't been translated.

Create a translation

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

When you are using custom fonts in your project, then exporting it with phonegap and building it with xcode for iOS you may find that you dont see your custom fonts.

This is how to fix it.

Phase 1: Installing custom fonts for the compiled app

Go to your platforms/ios/AppName/Resources folder

Drop the original font files you wish to use into this folder (be aware of licensing issues)

In your AppName-Info.plist file you’ll want to add the following lines:

    <key>UIAppFonts</key>
      <array>
        <string>my-custom-font-1.ttf</string>
        <string>my-custom-font-2.ttf</string>
    </array>

At this point you should be aware of a few things:

Font file names should be entered exactly as they appear in the Finder including the extension

iOS only supports True Type and Open Type fonts (.ttf and .otf)

Once this is done, you should see some new items in your app info pane in Xcode. Open your project in Xcode and click on the target for which you want to use custom fonts and then click on the info tab like so:

Your new fonts should show up

If you saved your AppName-Info.plist file with the new array from step 3 then you should see a new item under “Custom iOS Target Properties” called “Fonts provided by application”. If you expand this item you should see each of the font files you added to your Resources folder.

Most articles and tutorials online will have you stop here. But there’s more to it and that’s what trips everyone up!

Now you need to go into the Build Phases tab and expand the “Copy Bundle Resources” item. At the bottom of that list you’ll see a little plus sign. Click it because you need to add some resources. A dialog box will open letting you select the files you want to copy into the app. Just go to platforms/ios/AppName/Resources/ in your project and select the files you just copied there in step 2. You can select multiple files by holding down Command and clicking each file you added. Click Next (or Finish or whatever the Continue button actually says) and then another dialog box will show up. I checked the first checkbox that was originally unchecked and left the rest of the settings the way they are and clicked through to finish.

If all went well you should now see your font files in the list:

Your font files will show here when you finish

Now you can really use custom fonts in your app. But wait! There’s still another catch! Yes, there’s even more that could trip you up at this point. Normally when we write CSS we’re used to either picking a font-family name ourselves (when using @font-face) or using the font family name given to use by the font provider (like Google Web Fonts). This won’t always work in the compiled app even if it works when running

the app on a local server.

  • 0 Comments

  • Order by
Want to leave a comment? Login or Register an account!