Change the font of a UIBarButtonItem

Question

UIToolbar with UIBarButtonItem

I have a UIBarButtonItem in my UIToolbar titled Done. Now I want to change the font from the default to "Trebuchet MS" with Bold. How can I do that?

score 225 · Answer 1 · edited Apr 05 '18 at 17:20

To be precise, this can be done as below

[buttonItem setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys: 
    [UIFont fontWithName:@"Helvetica-Bold" size:26.0], NSFontAttributeName,
    [UIColor greenColor], NSForegroundColorAttributeName,
    nil] 
                          forState:UIControlStateNormal];

Or with object literal syntax:

[buttonItem setTitleTextAttributes:@{
     NSFontAttributeName: [UIFont fontWithName:@"Helvetica-Bold" size:26.0],
     NSForegroundColorAttributeName: [UIColor greenColor]
} forState:UIControlStateNormal];

For convenience, here's the Swift implementation:

buttonItem.setTitleTextAttributes([
        NSAttributedStringKey.font: UIFont(name: "Helvetica-Bold", size: 26.0)!,
        NSAttributedStringKey.foregroundColor: UIColor.green],
    for: .normal)

NSFontAttributeName should be used instead UITextAttributeFont, and NSForegroundColorAttributeName should be instead of UITextAttributeTextColor when developing for IOS7. — Raz, Feb 11 '14 at 10:12

score 134 · Answer 2 · edited Jun 02 '18 at 18:55

For those interested in using UIAppearance to style their UIBarButtonItem's fonts throughout the app, it can be accomplished using this line of code:

Objective C:

NSDictionary *barButtonAppearanceDict = @{NSFontAttributeName : [UIFont fontWithName:@"HelveticaNeue-Light" size:12.0], NSForegroundColorAttributeName: [UIColor whiteColor]};
[[UIBarButtonItem appearance] setTitleTextAttributes:barButtonAppearanceDict forState:UIControlStateNormal];

Swift 2.3:

UIBarButtonItem.appearance().setTitleTextAttributes(
[
    NSFontAttributeName : UIFont(name: "HelveticaNeue-Light", size: 12)!,
    NSForegroundColorAttributeName : UIColor.white
],
for: .normal)

Swift 3

UIBarButtonItem.appearance().setTitleTextAttributes(
[
    NSFontAttributeName : UIFont(name: "HelveticaNeue-Light", size: 12)!,
    NSForegroundColorAttributeName : UIColor.white,
], for: .normal)

Swift 4

UIBarButtonItem.appearance().setTitleTextAttributes(
[
    NSAttributedStringKey.font : UIFont(name: "HelveticaNeue-Light", size: 12)!,
    NSAttributedStringKey.foregroundColor : UIColor.white,
], for: .normal)

Or for a single UIBarButtonItem (not for all app wide), if you have a custom font for one button in particular:

Swift 3

let barButtonItem = UIBarButton()
barButtonItem.setTitleTextAttributes([
    NSFontAttributeName : UIFont(name: "FontAwesome", size: 26)!,
    NSForegroundColorAttributeName : UIColor.white,
], for: .normal)
barButtonItem.title = "\u{f02a}"

Swift 4

let barButtonItem = UIBarButton()
barButtonItem.setTitleTextAttributes([
    NSAttributedStringKey.font : UIFont(name: "FontAwesome", size: 26)!,
    NSAttributedStringKey.foregroundColor : UIColor.white,
], for: .normal)
barButtonItem.title = "\u{f02a}"

Of course, you can change the font & size to whatever you'd like. I prefer to put this code in the AppDelegate.m file in the didFinishLaunchingWithOptions section.

Available attributes (just add them to the NSDictionary):

NSFontAttributeName: Change font with a UIFont
NSForegroundColorAttributeName: Change color with a UIColor
NSShadow: Add a drop shadow (see NSShadow class reference)

(Updated for iOS7+)

The UITextAttribute.. keys are deprecated as of iOS7. Use NSFontAttribute... and NSForeground... etc instead. — Mani, Nov 14 '14 at 12:23
I have updated for the deprecations introduced in iOS7. Thanks for the heads up, @EmmanuelAy! — rog, Nov 15 '14 at 16:50
Fantastic! My app is looking beautiful now (well, in my own way that is!! :P) Thank you — Septronic, Nov 03 '15 at 23:29

score 131 · Accepted Answer · edited Jun 18 '15 at 23:37

131

Because UIBarButtonItem inherits from UIBarItem, you can try

- (void)setTitleTextAttributes:(NSDictionary *)attributes
                  forState:(UIControlState)state

but this is for iOS5 only. For iOS 3/4, you will have to use a custom view.

edited Jun 18 '15 at 23:37

Raul Huerta

350
1
8

answered Jan 13 '12 at 11:37

teriiehina

4,703
3
41
62

score 20 · Answer 4 · answered May 08 '15 at 12:33

20

In Swift you would do this as followed:

backButtonItem.setTitleTextAttributes([
        NSFontAttributeName : UIFont(name: "Helvetica-Bold", size: 26)!,
        NSForegroundColorAttributeName : UIColor.blackColor()],
    forState: UIControlState.Normal)

answered May 08 '15 at 12:33

Antoine

22,668
11
85
94

1

Don't forget the exclamation mark (!) after the font. The error message: "'_' is not convertible to 'String'" is not really helpful. – Ciryon Sep 03 '15 at 06:41

score 17 · Answer 5 · answered Dec 23 '13 at 23:20

These are great answers above. Just updating for iOS7:

NSDictionary *barButtonAppearanceDict = @{NSFontAttributeName : [UIFont fontWithName:@"HelveticaNeue-Thin" size:18.0] , NSForegroundColorAttributeName: [UIColor whiteColor]};
    [[UIBarButtonItem appearance] setTitleTextAttributes:barButtonAppearanceDict forState:UIControlStateNormal];

Anbu.Karthik · Answer 6 · 2016-09-29T04:41:31.547

Swift3

  buttonName.setAttributedTitle([
        NSFontAttributeName : UIFont.systemFontOfSize(18.0),
        NSForegroundColorAttributeName : UIColor.red,NSBackgroundColorAttributeName:UIColor.black],
                                     forState: UIControlState.Normal)

swift

   barbutton.setTitleTextAttributes([
        NSFontAttributeName : UIFont.systemFontOfSize(18.0),
        NSForegroundColorAttributeName : UIColor.redColor(),NSBackgroundColorAttributeName:UIColor.blackColor()],
        forState: UIControlState.Normal)

Objective-C

     [ barbutton setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
        [UIFont fontWithName:@"Helvetica-Bold" size:20.0], NSFontAttributeName,
        [UIColor redColor], NSForegroundColorAttributeName,[UIColor blackColor],NSBackgroundColorAttributeName,
        nil]
        forState:UIControlStateNormal];

score 10 · Answer 7 · answered Mar 24 '20 at 10:18

10

Swift 5 Implementation

rightButtonItem.setTitleTextAttributes([
            NSAttributedString.Key.font: UIFont(name: "Helvetica-Bold", size: 26.0)!,
            NSAttributedString.Key.foregroundColor: UIColor.green],
        for: .normal)

answered Mar 24 '20 at 10:18

pankaj nigam

381
6
9

score 8 · Answer 8 · edited Apr 08 '14 at 09:33

To do this for some UIBarButtonItems but not all I recommend the following approach.

Create a UIBarButtonItem subclass. Don't add anything to it - you will only use it as a custom class in the storyboard and for its appearance proxy...
In your storyboard, change the custom class for all desired UIBarButtonItems to your subclass
In your AppDelegate import your UIBarButtonItem subclass and add the following line to application:didFinishLaunchingWithOptions:

In my case I subclassed UIBarButtonItem for the sole purpose of bolding the text:

[[BoldBarButtonItem appearance] setTitleTextAttributes:
  [NSDictionary dictionaryWithObjectsAndKeys: 
    [UIFont boldSystemFontOfSize:18.0], NSFontAttributeName,nil] 
                                              forState:UIControlStateNormal];

score 8 · Answer 9 · answered Jun 19 '18 at 14:14

In Swift 4, you can change the font and colour of UIBarButtonItem by adding the following code.

addTodoBarButton.setTitleTextAttributes(
        [
        NSAttributedStringKey.font: UIFont(name: "HelveticaNeue-Bold", size: 17)!,
        NSAttributedStringKey.foregroundColor: UIColor.black
        ], for: .normal)

score 6 · Answer 10 · answered Feb 24 '19 at 08:21

This is the right way: declare your barButtonItem (in this case rightBarButtonItem) and add it setTitleTextAttributes.

navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Go!", style: .plain, target: self, action: #selector(yourFuncDestination))

after you can add title attributes

navigationItem.rightBarButtonItem?.setTitleTextAttributes([.font : UIFont.systemFont(ofSize: 18, weight: .bold), .foregroundColor : UIColor.white], for: .normal)

you can change the size, the weight (.bold, .heavy, .regular etc.) and the color how you prefer... Hope this help :)

score 2 · Answer 11 · answered Apr 20 '17 at 21:03

2

swift 3

barButtonName.setTitleTextAttributes( [NSFontAttributeName : UIFont.systemFont(ofSize: 18.0),NSForegroundColorAttributeName : UIColor.white], for: .normal)

answered Apr 20 '17 at 21:03

venky

1,102
11
24

score 1 · Answer 12 · answered Nov 18 '15 at 07:15

Throughout App:

if let font = UIFont(name: "AvenirNext-DemiBold", size: 15) {
        UIBarButtonItem.appearance().setTitleTextAttributes([NSFontAttributeName: font,NSForegroundColorAttributeName:TOOLBAR_TITLE_COLOR], forState: UIControlState.Normal)

    }

score 0 · Answer 13 · answered Jul 08 '19 at 16:39

For completion I would like to add this method, still used in Objective-C in 2019. :)

_titleLabel = [[UILabel alloc] initWithFrame:CGRectZero];
_titleLabel.text = _titleBarButtonItem.title;
_titleLabel.textColor = UIColor.whiteColor;
_titleLabel.font = [UtilityMethods appFontProDisplayBold:26.0];

[_titleLabel sizeToFit];
UIBarButtonItem *titleLabelItem = [[UIBarButtonItem alloc] initWithCustomView:_titleLabel];

score 0 · Answer 14 · answered Jan 13 '12 at 11:46

0

UIBarButton haven't property related to change the font. But you can create a button with custom font and then add into UIBarButton. It May be solved your problem

answered Jan 13 '12 at 11:46

Hiren

12,632
7
53
72

score 0 · Answer 15 · answered Jan 13 '12 at 11:50

Assuming you want to support iOS4 and earlier, your best bet is to create a bar button using the initWithCustomView: method and supply your own view which could be something like a UIButton where you can easily customise the font.

You can also drag a UIButton onto a toolbar or navigation bar in Interface Builder if you want to create the button with drag-and-drop instead of programmatically.

Unfortunately this means creating the button background image yourself. There's no way to customise the font of a standard UIBarButtonItem prior to iOS5.

score 0 · Answer 16 · answered Jan 13 '12 at 13:04

You can create a custom UIView programmatically:

UIView *buttonItemView = [[UIView alloc] initWithFrame:buttonFrame];

Then add images, labels or whatever you like to your custom view:

[buttonItemView addSubview:customImage];

[buttonItemView addSubview:customLabel];

...

Now put it in your UIBarButtomItem.

UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:buttonItemView];

And finally add barButtonItem to you navigation bar.

Change the font of a UIBarButtonItem

16 Answers16

Linked

Related