Custom installed font not displayed correctly in UILabel

Question

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?

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

We had the same issue with one of our custom fonts. We also "fixed" the problem by editing the font ascender property. However, we found that this created other problems and layout issues. For example dynamically setting cell height based on label height would blow up when using our ascender edited font.

What we ended up doing was changing the UIButton contentEdgetInsets property.

yourButton.contentEdgeInsets = UIEdgeInsetsMake(-10, 0, 0, 0);

Not sure which method is better, but just wanted to share another way to fix the problem.

Answer 5

1. Download and Install Apple's Font Tools here: https://developer.apple.com/downloads/index.action?q=font (the download link is in the bottom)
2. Open the terminal and cd your way to where your font is
3. Run this command: ftxdumperfuser -t hhea -A d MY_FONT_NAME.ttf
4. Now you have an xml file with some of the font's properties, edit it in your text editor
5. Search for the "lineGap" property and add 200 to its value
6. Save the xml file
7. Run this command: ftxdumperfuser -t hhea -A f MY_FONT_NAME.ttf
8. Delete the xml file
9. Try the configured font on iOS 6 and see if it looks better.
10. If you need, you can go back to step 3 and add/subtract to the "lineGap" property. (I ended up adding 250 to my configuration)

Answer 6

For those running OS X El Capitan and coming to this thread, you might have noticed that the Apple Font Tool Suite is no longer compatible (at least for now).

But you can still perform the changes described by kolyuchiy and Joseph Lin with free font editing software FontForge.

Open the font with FontForge and select Element in the top menu, then go to Font Info > OS/2 > Metrics. There you want to edit the HHEad Line Gap and HHead Ascent Offset values.

Once you've done the necessary edits you can just export the font in File > Generate Fonts and select the right font format

Answer 7

Thanks to the this answer I fixed my problem with Glyphs, but a little bit differently.

I opened my font with Glyphs (also works with Glyphs mini) and found this section there (this from Glyphs mini, to get there push i button in the right top corner):

Just delete all of this alignment zones (or some of them) and it will fix this problem. Worked perfectly for me.

Answer 8

Creating attributed text from your labels text was the fix for me. Heres an extension:

extension UILabel {
    /// You can call with or without param values; without will use default 2.0
    func setLineSpacing(lineSpacing: CGFloat = 2.0, lineHeightMultiple: CGFloat = 2.0) {
        guard let labelText = self.text else { return }
        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.lineSpacing = lineSpacing
        paragraphStyle.lineHeightMultiple = lineHeightMultiple
        let attributedString:NSMutableAttributedString
        if let labelattributedText = self.attributedText {
            attributedString = NSMutableAttributedString(attributedString: labelattributedText)
        } else {
            attributedString = NSMutableAttributedString(string: labelText)
        }
        // (Swift 4.2 and above) Line spacing attribute
        attributedString.addAttribute(NSAttributedString.Key.paragraphStyle, value:paragraphStyle, range:NSMakeRange(0, attributedString.length))
        self.attributedText = attributedString
    }
}

For my custom font I got the result I need from:

self.myLabel.setLineSpacing(lineSpacing: 1.2, lineHeightMultiple: 1.2)

This works by using the native provided NSMutableParagraphStyle() which contains line height and spacing properties (which are accessible as @IBOutlet properties in the Storyboard too if you are not programming your labels).

Answer 9

Have you tried Core Text? I've had some success rendering custom fonts through Core Text, but I don't know if it would fit your situation.

Answer 10

I used https://github.com/fonttools/fonttools - very easy to use and free. In my case, the change of 'ascender'=1000 and 'lineGap'=0 in 'hhea' table did the trick.

Based on article from Trevor Harmon https://medium.com/@thetrevorharmon/how-to-use-apples-font-tools-to-tweak-a-font-a386600255ae

Answer 11

If your are having trouble with these command line utilities then try fontcreator on window. and change font assender from its setting menu.

Answer 12

For anyone who are struggling to use ftxdumperfuser (kolyuchiy answer) on Mac OS Mojave because of command not found error:

• Download the font tools package from Apple. Found them at https://developer.apple.com/download/more/?q=font, picked the one for XCode 11.
• Mount the dmg file
• Enter the disk image cd /Volumes/macOS\ Font\ Tools
• Extract the package to a folder of your choosing: pkgutil --expand-full macOS\ Font\ Tools.pkg ~/font-tools
• The CLI tools are now available in ~/font-tools/FontCommandLineTools.pkg/Payload, you may add the folder to your path (export PATH="$PATH:$HOME/font-tools/FontCommandLineTools.pkg/Payload"), or copy the utils to your bin folder.

Answer 13

I had a similar issue with iconic "FontAwesome" font in my Sprite Kit game. Setting the SKLabelNode's SKLabelVerticalAlignmentMode property to .Center worked for me.

myLabel.verticalAlignmentMode = SKLabelVerticalAlignmentMode.Center

Just wanted to share in case somebody would be struggling with the same problem.