Custom iOS fonts and how to fix the vertical position problem

Every new iOS design I have to implement uses custom fonts. A few years back this would have been impossible but luckily since iOS4 it’s been reasonably simple to add your own fonts to iOS Apps. The process is as follows:

  1. Add the font (*.ttf or *.otf) to the project
  2. Make sure it is added to ‘Copy Bundle Resources’ under Build Phases in the project target
  3. Add a key to your info.plist file called UIAppFonts, or it’s long name which is ‘Fonts provided by application’
  4. Make sure this an array (it is by default in Xcode 4.3)
  5. For each of your font files add the full filename including the extension as a new string key inside the UIAppFonts array.

Your custom fonts should now be successfully added to the project. There are two ways to use them. First for iOS4 and iOS5 you can just assign the following to the font variable on an object:

[UIFont fontWithName:@"CustomFontName" size:14.0]

The CustomFontName needs to be the name of the font from Font Book, not the filename! (UPDATE: As it turns out this isn’t always the case, check out my separate post about this)

Alternatively if you are only targeting iOS5 you can use the new Appearance proxy. The following code will set all the UILabel fonts to be your custom font.:

[[UILabel appearance] setFont:[UIFont fontWithName:@"CustomFontName" size:14.0]];

You can also use the custom font in Interface Builder if you install the font onto your mac using Font Book.

Height Adjustment

Most of the custom fonts i’ve used usually have some issue with their vertical alignment. Either they sit too low or too high when compared to the default fonts. This poses a lot of problems and makes it quite difficult to get things aligned properly. The cause of this is that your custom font has an ascender and descender settings which are not being rendered properly by iOS.

Let me explain quickly what these two are before going any further. The ascender is essentially the whitespace at the top of a font and the descender is the whitespace at the bottom of a font, the two combined space the font out correctly in relation to screen elements and other fonts. I have no idea why iOS doesn’t seem to like them but I can hopefully give you a solution.

To edit these in the font you will need to download the Apple Font Tool Suite. Once you’ve installed this you need to open Terminal and navigate to the directory that contains your font. After that enter the following command:

ftxdumperfuser -t hhea -A d font.ttf

This will create a file called font.hhea.xml, open this new file into a text editor and adjust the values for ascender and descender. Generally if you font sits too low you want to decrease ascender and increase descender. After editing and saving enter the following command into terminal to reconstruct your Font file:

ftxdumperfuser -t hhea -A f font.ttf

You can now use the font.ttf file in your application. If the font still isn’t right just repeat the above procedure until you are happy.

, , , , , , , ,

  1. #1 by Daniele on June 14, 2012 - 10:56 am

    cool, but I prefer just to play with label\button’s inset.

  2. #2 by Andy Yardley on June 14, 2012 - 11:02 am

    Hi Daniele, What you have suggested is one way to resolve the issue but it doesn’t fix the problem and you need to do this every time you use the custom font. My solution actually fixes the custom font to work with iOS’s rendering engine allowing you to use it as a direct replacement for the standard fonts without any modifications.

  3. #3 by Patrick on June 21, 2012 - 12:02 am

    Hey, this was super useful, thank you.

  4. #4 by sym on July 5, 2012 - 3:51 pm

    awesome! thank you!

  5. #5 by Ilan on August 17, 2012 - 8:24 am

    Its really cool.. Thank you so much…

  6. #6 by Seth on August 29, 2012 - 1:15 am

    Is there a way to calculate what the values should be? I edited things to look good, but then the line height became wrong.

  7. #7 by Pit Garbe on September 27, 2012 - 7:09 pm

    Very useful information!
    I applied it to the FontAwesome TTF, which I use in the BButton+FontAwesome category. The larger the font gets the worse it looks without this fix.

  8. #8 by devon on November 21, 2012 - 3:42 am

    thanks andy! this spacing issue was plaguing me and this ascender/descender fix is exactly what i needed!

  9. #9 by ArtFaks on December 20, 2012 - 4:57 pm

    Hi Andy, very useful tips, but i’ve the same problem with space between letters and I tear the hair to fix it! an idea?

  10. #10 by Andy Yardley on February 3, 2013 - 4:02 pm

    Sadly i’ve not found a quick solution to the space between letters that didn’t involve editing the font directly using a font editor tool. It’s on my radar of things to solve and i’ll post about it as soon as I find one 🙂

  11. #11 by adstrakt on April 19, 2013 - 9:00 am

    Hi it was very useful for me. However im having problems with the same font being cut off of the left side of the letter K and P its a script font. Any suggestions how this can be fixed.

  12. #12 by Gonzalo on July 17, 2013 - 6:15 pm

    It’s working!

    Thanks fot the tip!

  13. #13 by dom on September 30, 2013 - 4:42 pm

    unfortunately, this no longer works in ios7 🙁

  14. #14 by Will on December 13, 2013 - 7:10 pm

    Hi Andy, Thanks, this is very useful. Im also looking to apply a global letter spacing trick to fix “kerning”, since NSAttrivutedString is not supported everywhere, and is rather cumbersome to apply globally.

    Which font tool have you used to solve said issues, and were you able to globally increase spacing on a percentage basis?

  15. #15 by John Robinson on January 31, 2014 - 10:58 pm

    Hi, Andy. I notice you said “You can also use the custom font in Interface Builder if you install the font onto your mac using Font Book.” I’ve tried this, but didn’t have any success, and I can’t find any reference online to this working (but a lot of people complain that it doesn’t). Is there anything more to it than that?

  16. #16 by Mathias on September 1, 2014 - 6:17 pm

    Than you, we had a similar problem. The accents of some upper case Spain signs (like Õ or Ä) are not rendered correct.
    Increasing the ascender with the tool did work … Thank’s

  17. #17 by moze on November 12, 2014 - 4:05 pm

    Be Sure to keep the sum of ascender and descender the same.
    I had this fix applied to a font a while ago and all looked good. Now I did some more sophisticated layout and it took me a long time to figure out that the CTFont-API was only lying to me because I had patched the font inconsistantly….

(will not be published)