How can I use SF Pro Rounded or a custom Font for Navigation titles in SwiftUI?

Question

I am trying to change the font for the Navigation View title to the system rounded one, but I can't seem to find a way to do it.

To be clear, I can change the font fine on any Text View, List etc, but on the Navigation Title it seems to be impossible.

For reference the title ("Settings") in the app Carrot Weather achieves this:

Any idea?

Thanks !!!

Answer 1

You can use largeTitle to get the default navigation bar font, then apply rounding using withDesign(_:).

struct ContentView: View {
    init() {
        var titleFont = UIFont.preferredFont(forTextStyle: .largeTitle) /// the default large title font
        titleFont = UIFont(
            descriptor:
                titleFont.fontDescriptor
                .withDesign(.rounded)? /// make rounded
                .withSymbolicTraits(.traitBold) /// make bold
                ??
                titleFont.fontDescriptor, /// return the normal title if customization failed
            size: titleFont.pointSize
        )
        
        /// set the rounded font
        UINavigationBar.appearance().largeTitleTextAttributes = [.font: titleFont]
    }
    var body: some View {
        NavigationView {
            Text("Hello World!")
                .navigationTitle("Dashboard") /// use this for iOS 14+
        }
    }
}

Result: