Fix Vertical Position Issue of Custom iOS Fonts

02 / May / 2015 by Ashu Baweja 0 comments

Custom fonts can make all the difference in the world when you’re trying to convey a specific user experience. Luckily, it’s pretty easy to add your own fonts in your iOS app but most of the custom fonts 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.
iOS Simulator Screen Shot 1
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.
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 xcode and adjust the values for ascender and descender. Generally

    • if you font sits too low you have to decrease ascender and increase descender
    • if you font sits too high you have to increase ascender and decrease descender


  • For example in above image fonts sits too high, open font.hhea.xml in xcodeScreen Shot 2
    Now increse ascender and decrease descender.
    Screen Shot 3
    After editing and saving enter the following command into terminal to reconstruct your Font file:

    ftxdumperfuser -t hhea -A f font.ttf

    iOS Simulator Screen Shot 5
    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!!!

    Tag -

    FOUND THIS USEFUL? SHARE IT

    Leave a comment -