How to change the font and text color of the title of UINavigationBar

Question

I want to be change the font of the title to Avenir, and I want to make it white. Here is my code in the viewDidLoad method:

UINavigationBar.appearance().titleTextAttributes = [NSFontAttributeName: UIFont(name: "Avenir", size: 20)!]
    UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName: UIColor.whiteColor()]

This code only changes the color of the title, not the font. Additionally, I tried implementing this in the App Delegate File, but that did not work.

Here is what my UINavigationBar looks like:

I want the title to have a font of Avenir as well. How do I achieve this?

score 36 · Accepted Answer · edited Dec 21 '21 at 20:25

It seems this is needed as well:

self.navigationController?.navigationBar.barStyle       = UIBarStyle.Black // I then set the color using:

self.navigationController?.navigationBar.barTintColor   = UIColor(red: 204/255, green: 47/255, blue: 40/255, alpha: 1.0) // a lovely red

self.navigationController?.navigationBar.tintColor = UIColor.whiteColor() // for titles, buttons, etc.

let navigationTitleFont = UIFont(name: "Avenir", size: 20)!

self.navigationController?.navigationBar.titleTextAttributes = [NSFontAttributeName: navigationTitleFont]

score 14 · Answer 2 · answered Aug 06 '15 at 03:54

If you want the styles to be applied through out the whole app add these lines in the AppDelegate.m file.

NSShadow* shadow = [NSShadow new]; 
shadow.shadowOffset = CGSizeMake(0.0f, 0.0f); 
shadow.shadowColor = [UIColor blackColor]; 

[[UINavigationBar appearance] setTitleTextAttributes: @{
NSForegroundColorAttributeName: [UIColor whiteColor],
NSFontAttributeName: [UIFont fontWithName:@"Kelvetica Nobis" size:20.0f],
NSShadowAttributeName: shadow 
}];

NSForegroundColorAttributeName sets the Font color.

NSFontAttributeName sets a custom font face to the title text.

NSShadowAttributeName applies a nice shadow effect to the text, you can remove this part if you want.

Also in advance, you can add these line to hide the text that comes up in back button in action bar when you navigate to another view within the navigation controller.

[[UIBarButtonItem appearance]
     setBackButtonTitlePositionAdjustment:UIOffsetMake(-1000, -1000)
     forBarMetrics:UIBarMetricsDefault];

Hope this help your question :)

score 14 · Answer 3 · answered Nov 07 '18 at 11:37

14

In case someone needs this in Swift 4:

let navBarAppearance = UINavigationBar.appearance()
navBarAppearance.barTintColor = .red
navBarAppearance.tintColor = .white
navBarAppearance.titleTextAttributes = [
        NSAttributedString.Key.foregroundColor: UIColor.white,
        NSAttributedString.Key.font: UIFont(name: "Avenir", size: 20)!]

answered Nov 07 '18 at 11:37

algrid

5,600
3
34
37

1

UINavigationBar.appearance().tintColor does not impact my navigation title text colors in Xcode 10 and Swift 5, they remain black. I could not find how to update them with my theme. – Vilmir Jul 01 '19 at 09:44
2

@Vilmir you should use `titleTextAttributes` for title. `tintColor` is for UIBarButtonItems. – AlexanderZ Aug 07 '19 at 08:58

score 6 · Answer 4 · answered Oct 30 '17 at 06:57

6

Your code is OK you just need to set all of titleTextAttributes in one line:

UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName: UIColor.white , NSFontAttributeName: UIFont(name: "Avenir", size: 17)!]

answered Oct 30 '17 at 06:57

Milad Faridnia

9,113
13
65
78

score 5 · Answer 5 · answered Apr 18 '20 at 11:02

In Swift 5:

let appearance = UINavigationBarAppearance()
    appearance.titleTextAttributes = [
        NSAttributedString.Key.foregroundColor: UIColor.white,
        NSAttributedString.Key.font: UIFont(name: "Avenir", size: 20)!]
    appearance.largeTitleTextAttributes = [
        NSAttributedString.Key.foregroundColor: UIColor.white,
        NSAttributedString.Key.font: UIFont(name: "Avenir", size: 35)!]

Code here are for Title and Large title. you can also remove custom font if you want system font.

score 2 · Answer 6 · answered Dec 14 '21 at 03:42

I'm updating this for iOS 15. If you have a scroll view that pushes something behind the Nav Bar it WILL change the NavigationBar background if you do NOT set "navigationBar.scrollEdgeAppearance".

So here is a simple config to set it for ALL of your views in ViewDidLoad of your main ViewController.

        // Set top Nav Bar behavior for ALL of app
    let standardAppearance = UINavigationBarAppearance()
    
    // Title font color
    standardAppearance.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
    
    // prevent Nav Bar color change on scroll view push behind NavBar
    standardAppearance.configureWithOpaqueBackground()
    standardAppearance.backgroundColor = UIColor.blue
    
    
    self.navigationController?.navigationBar.standardAppearance = standardAppearance
    self.navigationController?.navigationBar.scrollEdgeAppearance = standardAppearance

So the 'scrollEdgeAppearance' you can set title color, tint, NavBar color and the works. The standardAppearance is what shows at loading.

Took me a while to figure this one out for iOS15.

You're welcome! :-)

score 1 · Answer 7 · answered Aug 06 '15 at 03:40

1

I would just create an outlet and do this:

@IBOutlet weak var navigationBar: UINavigationBar!
override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    navigationBar.titleTextAttributes = [NSFontAttributeName: UIFont(name: "Avenir", size: 30)!]
}

answered Aug 06 '15 at 03:40

Volkodav

600
1
4
9

Thank you for your response! I have created all of my UI elements programmatically, without Interface Builder. So, this solution does not suit my needs. – Rehaan Advani Aug 06 '15 at 03:44

How to change the font and text color of the title of UINavigationBar

7 Answers7

Linked