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,115 visits, 4,575 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.

Phase 2: Adding the @font-face tag to your index.html file

To actually have your game render your custom font you need to add the following tag under the css declarations in your index.html file under the phonegap www folder:

    @font-face {
       font-family:"my-custom-font-1";
       src: url(./my-custom-font-1.ttf);
    }

After you have done that run your game on the simulator and you should see your font is rendered correctly.

If for some reason you dont see your font is because sometimes what a font specifies as it’s font family in the font file differs from what we use in our CSS. So, in my case I was using a custom icon font created with Fontello along with a font I got from Google’s Web Font service. In order to make sure the fonts show up when running the app on a local server and in the iOS emulator I had to change the @font-face declarations a bit.

Your compiled app will only know your fonts by their formal name specified in the font file. So the first step to figuring out how to modify your @font-face declaration is to open up Font Book, expand the name of the font, and click on the style you plan to use and have loaded into your app’s Resources folder (you’ll need the font installed locally on your system to be able to do this).

Now, click on the info button (shown below) to get the details about your font. You’ll want to look at what the “Font Family” item says (also shown below). That’s what you need to use when you call your font in your CSS.

Once this is done for each custom font you’re using you should go through your css block and make sure that any font-family declarations use that exact name (capital letters and all).

Now, if you followed all the steps correctly so far, you should be able to build and run your app in the simulator and see your custom fonts in action.

  • 0 Comments

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