iOS tips: Custom Fonts

Post by Steve Vlaminck

My good friend google told me that using a custom font in iOS is “easy”. And for the most part it is, but I got tripped up in a few places. I happen to have Apples Keychain example code lying around so I’ll be using that in this example. I am also using Xcode 4.5 and focusing on iOS 5.1, and iOS 6.

Adding the font to your project

Drag the .ttf file to your project.

Make sure “Add to targets” is checked.

Verify the font is in the project. There are two places you can do this.

By selecting the font, and verifying “Target Membership” in the Utilities area.

And By selecting your apps target, selecting the “Build Phases” tab, and verifying that your font is in the “Copy Bundle Resources” section.

And finally, add the font to your Info.plist. Note that most apps change the name of their plist to something like <ProjectName>-Info.plist. Add a key of “Fonts provided by application”, and make sure it’s an array, then add your font file name as an item in the array. Make sure you use the exact file name, and that your file name has an all-lowercase extension (.TTF apparently doesn’t work on iPhones, but .ttf does).

Knowing your font

This is where I had some issues. When you add your font you use the file name, but when you use your font you use the font name… The EXACT font name. If you ctrl + click on the .ttf file and select “Get Info”, you can find the “Full Name”. That seems to work with a lot of fonts, but the font I’m using doesn’t work that way. I had to open the .ttf file in the Font Book application, and look at the window header.

Using this name, you can log what font names you have available by using the fontNamesForFamilyName method like so:


NSLog(@"tt0001m_: %@",
[UIFont fontNamesForFamilyName:@"Swis721 Lt BT"]
);

Which gives the output:
2012-08-24 11:25:10.968 GenericKeychain[7260:c07] tt0001m_: (
"Swiss721BT-Light"
)

Using your font programmatically

Say you have a UILabel:

UILabel *myLabel = [[UILabel alloc] init];
[myLabel setText:@"Label Text"];

We set the font of our label by creating a UIFont, and setting it to our label with setFont.

UIFont *swissLight = [UIFont
fontWithName:@"Swiss721BT-Light"
size:myLabel.font.pointSize];
[myLabel setFont:swissLight];

Using your font in Interface Builder

This is an interesting solution that I got from stackoverflow. First you need to create a subclass of UILabel. Hit Cmd + N (or go to File > New > File…), select “Cocoa Touch” > “Objective-C class”, and hit “Next”. Name your class something like CustomFontSwissLightLabel and choose UILabel in the “Subclass of” section. Open your CustomFontSwissLightLabel.m file and override the awakeFromNib method like so:

- (void)awakeFromNib {
[super awakeFromNib];
self.font = [UIFont fontWithName:@"Swiss721BT-Light"
size:self.font.pointSize];
}

Now add a UILabel to you .xib file. In the “Utilities” area, under the “Identity Inspector” tab change the Class from UILabel to CustomFontSwissLightLabel.

That’s all there is to it. 

It really is pretty easy, but there are a handful of things that can trip you up, and I wrote this blog post because I got tripped up on every one of them :)

This entry was posted in Agile Processes, Software Development and tagged , , , , , . Bookmark the permalink.

Related Posts:

20 Responses to iOS tips: Custom Fonts

  1. thomas says:

    good post

  2. Sean says:

    It’s worth noting that your custom font will not be displayed in interface builder, but it will be displayed correctly once the app is built and run. This can make things tricky for alignment and positioning, especially when dealing with very typographic centered designs.

  3. gina says:

    Thank you. I’m sure I could have wasted days on this.

  4. Natalie says:

    Super!! a sanity restoring well written tutorial, thanks so much!

  5. Jack Wilcox says:

    Your tutorial was the best one out there. Thank you!

  6. abdus says:

    Nice description, But if your application contains lots of nibs and you need to set custom fonts in each UILablel, It wouldnot be a good approach to make IBOutlets of each. Rather A very good tutorial addressing the issue..
    http://www.abdus.me/ios-programming-tips/set-custom-fonts-in-interface-builder/

  7. Brhan says:

    Wooow good way to have the font in the interface builder.

    Thanks.

  8. Wouter says:

    I now see where I messed up. Thanks for posting this, it’s been a great help!

  9. Danny says:

    Fantastic piece. Thank you for the tutorial.

    The usage of my custom font seems to automatically reset the font size. I imagine I can fix this programmatically by adding a size within the UILabel subclass, but is there a way to get interface builder settings to affect it instead?

  10. Bruno Maia says:

    Thank you so mutch mate, now i see where I messed up! Your post save me a lot time!

  11. Matt says:

    Thanks for the opening in Font Book trick, this had me pulling my hair out all morning!

  12. Gonzalo says:

    I followed all of this steps and i couldn’t show the label with custom fonts. Im using ios6 with xCode 4.6.2

    Someone can help me?

  13. Pharaohnough says:

    This is probably the only article on the Internet that claims to solve the issue of using custom fonts in iOS and actually does. Well done Steve.

  14. Pingback: custom fonts is not work in my iOS app | BlogoSfera

  15. Melisa says:

    I loved it! I just have a question, is it possible to handle the kerning and line spacing of your custom font? Thanks!

  16. Michael says:

    This is really great, and I know you’ve covered every base, but for some reason there is something else that I need to do correctly.

  17. Chaaruu says:

    NSLog(@”tt0001m_: %@”, [UIFont fontNamesForFamilyName:@"Swis721 Lt BT"] );
    Which gives the output: 2012-08-24 11:25:10.968 GenericKeychain[7260:c07] tt0001m_: ( “Swiss721BT-Light” )

    in output I am getting blank name..I follow every step but not getting why this is not working..

  18. Javier Roberto says:

    Thanks, I wasted a lot of time with this, and you were the only one with the right answer.

  19. deni2s says:

    Much easier way to use custom fonts in IB is IBCustomFonts category which can be found here:
    https://github.com/deni2s/IBCustomFonts

    No need for subclassing every label (as described in article) and button and it’s approved by Apple.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>