UIButton custom font vertical alignment

Question

I've got a UIButton which uses a custom font, which is set when my view loads:

- (void)viewDidLoad
{
    [super viewDidLoad];    
    self.searchButton.titleLabel.font = [UIFont fontWithName: @"FONTNAME" size: 15.0 ];
}

The problem I've got is that the font is appearing to float up of the center line. If I comment out this line, the default font appears vertically centered fine. But changing to the custom font breaks the vertical alignment.

I'm getting the same issue on a Table Cell with a custom font too.

Do I need to tell the view somewhere that the custom font is not as tall as other fonts?

EDIT: I've just realized that the font I'm using is a Windows TrueType Font. I can use it fine in TextEdit on the Mac, only a problem with the alignment in my App

Button text not vertically centered

I am having the same issue with this font (.otf, not .ttf): http://www.fontsquirrel.com/fonts/bebas-neue — Neal Ehardt, Oct 20 '11 at 01:55

score 323 · Accepted Answer · edited Feb 08 '18 at 12:55

323

A similar problem was discussed at Custom installed font not displayed correctly in UILabel. There was no solution given.

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.

OS X El Capitan

The Apple Font Tool Suite Installer doesn't work anymore on OSX El Capitan because of SIP because it tries to install the binary files into a protected directory. You have to manually extract ftxdumperfuser. First copy the pkg from the dmg to a local directory afterwards unpack the OS X Font Tools.pkg with

~$ xar -xf OS\ X\ Font\ Tools.pkg

Now navigate into the folder fontTools.pkg with

~$ cd fontTools.pkg/

Extract payload with

~$ cat Payload | gunzip -dc | cpio -i

Now the ftxdumperfuser binary is in your current folder. You could move it to /usr/local/bin/ so that you can use it in every folder inside of the terminal application with the following.

~$ mv ftxdumperfuser /usr/local/bin/

edited Feb 08 '18 at 12:55

Andrés Pizá Bückmann

488
1
4
12

answered Nov 29 '11 at 16:27

kolyuchiy

5,465
2
23
31

4

+1 Great tip! Here's some info about Ascenders and Descenders http://typophile.com/node/13081 – tidwall Dec 03 '11 at 07:36
1

If Apple Font Tool Suite doesn't work for you, there is also a free tool called [Mensis](http://mensis.sourceforge.net/) – kolyuchiy Jan 11 '12 at 12:11
This looks much better than my padding hack. I'll have to try it out. – Pete Feb 23 '12 at 13:02
35

Worked equally well for OTF files. – mharper Mar 23 '12 at 02:01
1

This answer is awesome advice. I needed to adjust both the ascender and the lineGap to get things right. – AlexD Jul 11 '12 at 20:23
i had to decrease the ascender. but that't nice! – coolnalu Aug 04 '12 at 23:54
2

If you use a custom font modified with this solution, and you set text i.e. in a UITextView with multiple lines, the interline distance becomes way too big. – The dude Jan 29 '13 at 14:58
worked like a charm .. thank you very much .. and i second @Accatyyc – g.revolution Feb 20 '13 at 03:41
I used Type font editor (http://www.cr8software.net/type.html) which has a free edition and also runs on Windows. – MosheElisha Feb 22 '13 at 07:41
This is perfect! I was tired of setting edge insets and stuff like that, thank you! – Rick van der Linde Apr 01 '13 at 08:37
5

I've found that in iOS 7 beta 6, they've fixed the font alignment issue. So if you do this fix, it will be good in iOS 6, but broken in iOS 7.... 7 is still in beta though, so who knows – tybro0103 Aug 20 '13 at 20:53
@tybro0103 I found the same problem too, though managed to find a nice balance between the two iOS version. By the way there is also a descender property which I found you had to update in conjunction with the ascender, otherwise weird things can happen. – jklp Sep 12 '13 at 02:37
@jklp by nice balance... you mean they're both off, but only slightly? – tybro0103 Sep 12 '13 at 02:59
@tybro0103 Lol yep that's exactly what I meant :( – jklp Sep 12 '13 at 08:29
@tybro0103 did you find any solution allready - i'm having the same problem. – Andy Jacobs Sep 26 '13 at 11:56
I haven't done it yet, but I'd include two font files for each font you have - one with this fix and one without. In code, do a check on the ios version number to decide which font to set. Not awesome, I know, but seems unlikely there's a better way. – tybro0103 Sep 26 '13 at 14:59
this does fix on iOS 6 but won't help on iOS 7. I've posted a separate question here: http://stackoverflow.com/questions/19036051/ios-7-custom-fonts-alignment – leolobato Sep 26 '13 at 18:55
Thanks Man , thats works like charm even on ios7. In my case i have to manipulate the descender property as my text was being cut from below .. – Ankit Nov 25 '13 at 11:05
when trying to save back the font I got some illegal charaecters in the XML. Apperently the `"` changes to an illegal one for every value I edited. To fix that I had to copy-paste the `"` char from value that I didn't edit (On Text Edit. The illegal one: `“`, and the copied legal one: `"`). – Aviel Gross Dec 31 '13 at 13:03
Yes. Reducing the lineGap to zero (0) and leaving the ascender (at 1991) solved the problem for me with the free "Overpass" font from Fedora. Thank you all for guidance to a solution. Works on Both iOS6 and iOS7 – stephenhouser Feb 15 '14 at 02:58
Trying this with a custom font I was provided.. it just doesn't work. Doesn't have any effect at all. OTF font btw. – xissburg Sep 15 '15 at 15:10
2

I tried to install the Apple Font Suite on OS X El Capitan, however it can't be installed because it is not compatible anymore to the current OS X version. Did anyone find a way to get it running on El Capitan? – Display name Oct 19 '15 at 09:28
2

Apple Font Tools cannot install in Macbook Pro El Capitan. See http://apple.stackexchange.com/questions/211138/apple-font-tools-cannot-install-in-macbook-pro-el-capitan for workarounds. – Vadim Yelagin Feb 24 '16 at 15:52
I'm on El Capitan and could successfully use ftxdumperfuser thanks to this answer and the comment up there by @VadimYelagin . In my case I just edited the descender. Thanks everyone. http://www.no-spec.com/images/3Thumb_Badge_Sm.gif – Jonny Apr 14 '16 at 07:47
Can't download Apple Font Tool Suite anymore. {"responseId":"dd0a6a0a-b26c-407a-976f-d30d3f131439","resultCode":1003,"resultString":"request.uri.notfound","userString":"Invalid request, Service mapping to the requested URL is not available. ","creationTimestamp":"2016-07-15T08:20:44Z","userLocale":"en_US","requestUrl":"https://developer.apple.com:443/downloads/?q=font","httpCode":200,"suppressed":[]} – Jim Jul 15 '16 at 08:21
Apple Font Tools can be easily installed for OS X Sierra without any workarounds (at least in my case). Glyphs application did not help me. I had issue with cutting off letters like "Â" in Portuguese using MyriadPro-Regular font. Solved with increasing of ascender value. – Yurii Koval Aug 29 '17 at 09:14
3

Font tools have been updated for Xcode 9, they install fine on High Sierra. Direct link: https://developer.apple.com/download/more/?=font – Andrés Pizá Bückmann Feb 08 '18 at 11:52
1

The above instructions are incomplete; you can call `ftxdumperfuser`, but it will fail because it relies on `FontToolbox.framework` to be in `/Library/Frameworks`. You need to unpack and move files from `fonttoolbox.pkg` also. Complete instructions: https://apple.stackexchange.com/a/328214/254594 – gfullam Nov 26 '19 at 15:06

Jordi Corominas · Answer 2 · 2013-10-24T09:52:49.320

49

I solved the problem adjusting the top content (not the title!) inset.

For example: button.contentEdgeInsets = UIEdgeInsetsMake(10.0, 0.0, 0.0, 0.0);

Good luck!

edited Oct 24 '13 at 09:52

answered Oct 20 '11 at 11:34

Jordi Corominas

1,244
10
15

15

This was a good quick solution for me which seemed simpler than trying to edit the font. myButton.titleLabel.font = [UIFont fontWithName:@"FontName" size:20.0]; myButton.contentEdgeInsets = UIEdgeInsetsMake(3.0, 0.0, 0.0, 0.0); – Jamie Hamick Jan 29 '12 at 20:05
Brilliant! Thank you! My problem was slightly different, I had simple + and - buttons using the default font and they were appearing lower than centered, I was able to use the solution here to raise the text slightly so it didn't look off. – Patrick T Nelson Jul 27 '14 at 21:35

score 7 · Answer 3 · answered Sep 24 '11 at 11:31

7

Not sure if this will help as it may depend on your font, but it could be that your baseline is misaligned.

self.searchButton.titleLabel.baselineAdjustment = 
    UIBaselineAdjustmentAlignCenters;

answered Sep 24 '11 at 11:31

Mats

8,528
1
29
35

3

Works great on a titleLabel for a UIButton when the font size is being adjusted with minimumScaleFactor – smitt04 May 08 '14 at 01:48

score 6 · Answer 4 · edited May 23 '17 at 12:10

6

I think this is the best answer. no playing with ascender, numberOfHMetrics etc... just import-export by Glyphs application and Job done. Thanks to this answer: https://stackoverflow.com/a/16798036/1207684

edited May 23 '17 at 12:10

Community

1
1

answered Mar 21 '14 at 18:12

dollar2048

426
6
10

You have saved my day! – Aleš Oskar Kocur Jan 12 '16 at 11:57
Mine too! Thanks sir. – Juan Sagasti Nov 25 '16 at 12:12

score 3 · Answer 5 · answered Feb 10 '20 at 13:23

Late to the party, but as this issue hit me for the Nth time, I thought I'd post the simplest solution I've found: using Python FontTools.

Install Python 3 if it's not available on your system.
Install FontTools

pip3 install fonttools

FontTools include a TTX tool which enables conversion to and from XML.
Convert your font to .ttx in the same folder

ttx myFontFile.otf
Make the necessary edits to .ttx and delete the .otf file as this will be replaced in the next step.
Convert the file back to .otf

ttx myFontFile.ttx

Motivation: The solution by kolyuchi is incomplete, and even with this extended installation flow, running ftxdumperfuser resulted in an error on 10.15.2 Catalina.

score 2 · Answer 6 · answered Sep 24 '11 at 11:22

2

You can try this out in Interface Builder. Here is a snapshot of how to do it -

enter image description here

As you can see trying to do this in IB has its own benefits.

answered Sep 24 '11 at 11:22

Srikar Appalaraju

71,928
54
216
264

1

That setting is already in place, and in IB the font shows vertically, but shows as the default font. It is only when I run my app that my custom font face shows up, and it is not centered vertically – Pete Sep 24 '11 at 11:32
do you set your "custom font" in IB? is it supported in iOS fonts? – Srikar Appalaraju Sep 24 '11 at 13:42
The font is set in IB, and also by the code specified at the in my original post. It doesn't actually appear in the IB screen mockup, although it does in font select drop down in IB. – Pete Sep 24 '11 at 16:31

score -1 · Answer 7 · answered Apr 20 '23 at 09:53

-1

Switching from an otf to a ttf version of the font might be a possible fix for this issue, depending on the font.

answered Apr 20 '23 at 09:53

dwbrito

5,194
5
32
48

UIButton custom font vertical alignment

7 Answers7

Linked