How to add custom fonts in iOS app


There are many fonts supported by Apple and we can use that any time. But some times we want to add our own custom fonts in app. So, you have to add those fonts manually in our app.

Custom fonts can make all the difference in the world when you’re trying to convey a specific user experience.

Also, custom fonts can provide a much higher level of customisation in app. As a designer, custom fonts are something that, we love.

Custom fonts are added on a per-application basis. You can not add a font to your iOS device and make it available for all of your applications. Luckily, it’s pretty easy to add your own fonts in your iOS app.

Let’s walk through how to add custom fonts to our iOS application.

  1. Include your fonts in your XCode project
  2. Make sure that they’re included in the target
  3. Include your iOS custom fonts in your application plist file
  4. Find the name of the font
  5. Use UIFont and specify the name of the font

That’s it….Its Done….!!!

Step 1: Include your fonts in your XCode project

There are two ways to include fonts in your Xcode project. Either drag and drop your font file(s) into your XCode file tree or right click and “Add Files To…” to select your fonts.

Step 1: Include your fonts in your XCode project

Step 2: Make sure that they’re included in the target

 The next thing to do is to make sure that fonts are included in your build target.

Goto your project settings > Target > Build Phases > Copy Bundle Resources

Step 2: Make sure that they’re included in the target

Step 3: Include your iOS custom fonts in your application plist file

 The next thing to do is to modify your app’s plist to include these font faces. By default, your plist will be named something like [appname]-Info.plist and will reside in the “Supporting Files” folder if you haven’t moved it.

Open it and add a new row called “Fonts provided by application” which will be an array that you need to add all the filenames of the fonts you want to use.

In my case, it was “cinnamon cake.ttf” font as you can see in the screenshot below. The value for Item name should be exact the font file name.

Screen Shot 2014-03-04 at 1.23.08 pm

Step 4: Find the name of the font

This is a common problem for many people trying to include custom fonts into their iOS app. Here you have to specify actual font name rather then font file name.

So in order to find the name of the font you have following two options.

1) Add following snippet of code to log all the fonts available to your app in the console. Find your font name from the output and use that name for setting font name.

- (void)listAllFornts {

    for (NSString* family in [UIFont familyNames]) {
        NSLog(@"%@", family);

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

2) Double click on your font file name (in my case its, cinnamon cake.ttf) and install if its not installed already. After that, Scroll down to your font and select that font from the “Font Book” MAC-OS X application. Look at the PostScript name attribute and use that name  for setting font name.

Screen Shot 2014-03-04 at 11.49.48 am

Step 5: Use UIFont and specify the name of the font

 Finally, you can simply display your custom font using UIFont and whatever UILabel or UITextView you want.

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 60)];
label.text = @"Hello World!";
label.font = [UIFont fontWithName:@"cinnamoncake" size:20]

Notes:~

  1. Make sure you have a proper font license for mobile/app embedding.
  2. The best format for the custom font is TTF/OTF
  3. If you can’t get a TTF variation of your font, there’s a number of online font converters that you can use. (E.g. Free Online Font Converter)

Source Code:~

You can find the source code from here.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s