custom font on UIbutton title clipped on top of word

Question

I have uploaded a custom font and applied this font on the title of a UIbutton using the following code

videoButton.titleLabel.font = [UIFont fontWithName:@"LaurenScript" size:20];

The problem is that the title is being clipped on the top of the first letter (see photo below). I tried the same font on the UIlabel and it works fine so it is not a problem with the font. I tried also to change the rectFrame using

[videoButton.titleLabel setFrame:CGRectMake(0, 0, 300, 600)];

but that didn't do anything. Has anybody a clue of how I can fix this problem? Cheers

enter image description here

score 45 · Accepted Answer · answered Jan 22 '14 at 10:11

45

I had a similar problem, where a diaeresis got cut off on top of the titlelabel. I made a UIButton subclass and used this code to fix the problem:

-(void)layoutSubviews
{
    [super layoutSubviews];

    CGRect frame = self.titleLabel.frame;
    frame.size.height = self.bounds.size.height;
    frame.origin.y = self.titleEdgeInsets.top;
    self.titleLabel.frame = frame;
}

answered Jan 22 '14 at 10:11

Antoine

23,526
11
88
94

1

This should be best answer. – saranpol Mar 29 '14 at 19:52
I have the same issue with UITabBarItems clipping custom fonts. layoutSubviews isn't available to subclass on UITabBarItems, anyone know a fix for that? – Andy Davies May 06 '16 at 17:28
If you are still facing issues with text clipping with custom fonts please check my answer - can be applied to `UITabBarItem`'s also – Will Von Ullrich Oct 23 '17 at 19:02

score 34 · Answer 2 · answered Feb 03 '16 at 12:01

34

Select button in Interface builder and check for set a vertical alignment panel in the control section Below is example:

answered Feb 03 '16 at 12:01

Hardik Darji

3,633
1
30
30

Best answer I have seem for this problem so far! – BluGeni May 09 '16 at 13:38
1

This seems to be the equivalent of labelName.contentVerticalAlignment = .fill which also works – RanLearns Aug 27 '19 at 22:13

Will Von Ullrich · Answer 3 · 2017-10-23T19:00:13.003

Not sure if this is still an issue for anyone, but I found that (with using a custom font) the above solutions did not ultimately fix the issue, especially for a custom UIButton created solely programmatically.

Here is how I managed to fix this issue, with 1 line in particular that resolved the clipping issue:

UIButton *button = [[UIButton alloc] init];
button = [UIButton buttonWithType:UIButtonTypeCustom];

[button setTitle:@"Nice!" forState:UIControlStateNormal];
[button setFont:[UIFont fontWithName:<CUSTOM FONT NAME> size:buttonWidth/3.0f]];
button = CGRectMake(0, 0, <WIDTH>, <HEIGHT>);

Here was the line that resolved the clipping:

[button setContentVerticalAlignment:UIControlContentVerticalAlignmentFill];

Hopefully this helps anyone else who still were stuck. Happy coding!

Worked perfect for me! This should be accepted as the best answer! — Joe M, Feb 22 '17 at 15:05

score 5 · Answer 4 · answered Jun 29 '17 at 20:14

had same problem using a button with an image and text with a custom font. Everything had to be align centered vertically. And image not stretched. this worked out fine for me.

btn.contentVerticalAlignment = .fill
btn.contentMode = .center
btn.imageView?.contentMode = .scaleAspectFit

score 4 · Answer 5 · edited May 23 '17 at 12:34

I try this in swift 2.1, I adapt this code from Antoine answer. This may not good code but it solve my problem for now. You should make it better for you self.

import UIKit

class CustomUIButton: UIButton {

    override func layoutSubviews() {
        if var titleFrame : CGRect = titleLabel?.frame{

            titleFrame.size = self.bounds.size
            titleFrame.origin = CGPointZero
            self.titleLabel!.frame = titleFrame
            self.titleLabel!.textAlignment = .Center
        }
    }
}

score 3 · Answer 6 · edited May 23 '17 at 11:54

3

There is this (sad) solution: https://stackoverflow.com/a/10200908/352628

I have a similar problem. It seems that the titleLabel is just very uncontrollable, and to get control you need to inject a UILabel subview to the button... That makes me sad :(

edited May 23 '17 at 11:54

Community

1
1

answered Nov 05 '12 at 19:28

Ibmurai

932
7
11

Yep, that's what I ended up doing :( – Cyril Gaillard Nov 06 '12 at 03:38

score 0 · Answer 7 · answered Mar 14 '23 at 16:04

0

In my case the button title label was aligned vertically, but text needed insets on top.

self.contentEdgeInsets = UIEdgeInsets(top: 5.0, left: 0.0, bottom: 0.0, right: 0.0)

answered Mar 14 '23 at 16:04

M.Yessir

202
3
11

custom font on UIbutton title clipped on top of word

7 Answers7

Linked