Fix Vertical Position Issue of Custom iOS Fonts

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.

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

For example in above image fonts sits too high, open font.hhea.xml in xcode
Now increse ascender and decrease descender.

After editing and saving enter the following command into terminal to reconstruct your Font file:

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!!!