Custom installed font not displayed correctly in UILabel

I'm trying to use a Helvetica Neue Condensed font which I got from the Adobe Font Collection Pro Package. Unfortunately, it seems to draw incorrectly when I use it within a UILabel.

The line height seems to be calculated correctly (I think), but when the font is displayed, it is aligned to the very top of the bounding box. I called [myLabel sizeToFit] and only adjusted the width to produce this screen capture:

I had the same problem with both the bold and regular version of the font. I was able to pull a version of Helvetica Neue Bold from OSX and put it on my device and it displays fine (green background in above picture).

What could be wrong with the either the font file or my code that would cause it to draw this way?

I posted a solution that involves patching ttf font file here:

Here's the solution that worked for my custom font which had the same issue in UILabel, UIButton and such. The problem with the font turned out to be the fact that its ascender property was too small compared to the value of system fonts. Ascender is a vertical whitespace above font's characters. To fix your font you will have to download Apple Font Tool Suite command line utilities. Then take your font and do the following:

~$ ftxdumperfuser -t hhea -A d Bold.ttf

This will create Bold.hhea.xml. Open it with a text editor and increase the value of ascender attribute. You will have to experiment a little to find out the exact value that works best for you. In my case I changed it from 750 to 1200. Then run the utility again with the following command line to merge your changes back into the ttf file:

~$ ftxdumperfuser -t hhea -A f Bold.ttf

Then just use the resulting ttf font in your app.

So this is a modified version of kolyuchiy's answer.

I opened my font with Glyphs, and then exported it without modifying anything. Somehow, magically, the vertical alignment issue was gone!

What's better is that the new font plays nicely with methods like sizeWithFont:, so it doesn't have the issues mentioned by Joshua.

I took a look at the HHEA table with the command kolyuchiy mentioned, and noticed that Glyphs modified not just the ascender, but also lineGap and numberOfHMetrics for me.

Here's the raw data, before:

versionMajor="1"
versionMinor="0"
ascender="780"
descender="-220"
lineGap="200"
advanceWidthMax="1371"
minLeftSideBearing="-73"
minRightSideBearing="-52"
xMaxExtent="1343"
caretSlopeRise="1"
caretSlopeRun="0"
caretOffset="0"
metricDataFormat="0"
numberOfHMetrics="751"

and after:

versionMajor="1"
versionMinor="0"
ascender="980"
descender="-220"
lineGap="0"
advanceWidthMax="1371"
minLeftSideBearing="-73"
minRightSideBearing="-52"
xMaxExtent="1343"
caretSlopeRise="1"
caretSlopeRun="0"
caretOffset="0"
metricDataFormat="0"
numberOfHMetrics="748"

So the moral of the story- don't just increase the ascender, but modify other related values as well.

I'm no typography expert so I can't really explain the why and how. If anyone can provide a better explanation it'd be greatly appreciated! :)

iOS 6 honors the font's lineGap property, while iOS 7 ignores it. So only custom fonts with a line gap of 0 will work correctly across both operating systems.

The solution is to make the lineGap 0 and make the ascender correspondingly larger. Per the answer above, one solution is to import and export from Glyphs. However, note that a future version of the app might fix this "bug".

A more robust solution is to edit the font yourself, per this post. Specifically,

1. Install OS X Font Tools.
2. Dump the font metrics to a file: ftxdumperfuser -t hhea -A d YOUR_FONT.ttf
3. Open the dumped file in an editor.
4. Edit the ascender property by adding the value of the lineGap property to it. For example, if the lineGap is 200 and the ascender is 750, make the ascender 950.
5. Set the lineGap to 0.
6. Merge the changes into the font: ftxdumperfuser -t hhea -A f YOUR_FONT.ttf

Once you do this, you might have to adjust your UI accordingly.