Leonardo Maia Pugliese
Holy Swift

Holy Swift

How to change Tab Bar Item font when selected in Swift

How to change Tab Bar Item font when selected in Swift

UITabBarController problem and solution

Leonardo Maia Pugliese's photo
Leonardo Maia Pugliese
ยทMay 27, 2021ยท

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Hallo iedereen, Leo hier.

Today we will explore an easy but tricky problem about tab bar controllers. UITabBarController is a very handy component when you want to flat the navigation of your app.

The problem is that the default UITabBarItem don't behave as much as we expected and when we have to custom his attributes so this post is about one problem I found with them.

Good news before we start. I got a new job in Netherlands as iOS Developer ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰. The good thing is that I'll be fulfilling a long time dream to move to Europe (now I'm in Brazil), the bad thing is that me and my wife HAVE A LOT to do before the immigration. So if I miss some weekly posts until I completely setup in a new country, take my beforehand apologies.

Special shoutout for this week supporter: Tom - You are awesome!

Let's code! But first....


This is the The River Plaisir Fontaine a 1865 painting from Gustave Courbet. He was a controversial French painter, who bridged the gap between Romanticism and the Impressionist school of painters. He was controversial not only because he addressed social issues with his work, such as peasants and the working condition of the poor, but also because of the unsentimental way in which he portrayed them. He employed spontaneous brush strokes and a roughness of paint texture, which indicated that he was observing his subject directly from life, and thus challenging the academic ideas of the way art should be painted.

I choose this painting because we are talking about fonts. Right?


You need to change the font of the selected UITabBarItem to a bigger and bold one.

The image below show a tab bar with three items: Airports, Flights and Settings.

Screen Shot 2021-05-27 at 09.29.45.png

If you look closely the selected item label is bigger and bold. To achieve that we need to make two adjustments in the UITabBarController. We need to override two variables the selectedIndex and the selectedViewController.

If you only override the selectedViewController when the app open, it will not modify the font of the default selected item.

So imagine that you have a UITabBarController called MainTabViewController you can add the selection feature using like this:

import UIKit

class MainTabViewController: UITabBarController {

    override func viewDidLoad() {

    override var selectedIndex: Int { // Mark 1
        didSet {
            guard let selectedViewController = viewControllers?[selectedIndex] else {
            selectedViewController.tabBarItem.setTitleTextAttributes([.font: UIFont.boldSystemFont(ofSize: 13)], for: .normal) 

    override var selectedViewController: UIViewController? { // Mark 2
        didSet {

            guard let viewControllers = viewControllers else {

            for viewController in viewControllers {
                if viewController == selectedViewController {
                    viewController.tabBarItem.setTitleTextAttributes([.font: UIFont.boldSystemFont(ofSize: 13)], for: .normal)
                } else {
                    viewController.tabBarItem.setTitleTextAttributes([.font: UIFont.systemFont(ofSize: 12)], for: .normal)

The Mark 1 as stated earlier is necessary because the first time the APP open. After that the Mark 2 will be used to set the right font to the right TabBarItem. If is the selected we change to the bold font and a little bigger, else just set the regular font with smaller size.

And the result should be:


Today we see how could we add a little feature in your tab bar to make it more vivid to the user. In another post we can explore more options to make the tab bar more interactive/animated, but this is another day fight.

That's all my people, I hope you liked as I enjoyed write this article. If you want to support this blog you can Buy Me a Coffee or just leave a comment saying hello. You can also sponsor posts and I'm open to writing freelancing! Just reach me in LinkedIn or Twitter for details.

Thanks for the reading and... That's all folks.

credits: image

Did you find this article valuable?

Support Leonardo Maia Pugliese by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
Share this