How to Use Sf Rounded Font in Swiftui

How to use SF Rounded font in SwiftUI?

Text("Your Text").font(.system(.body, design: .rounded))

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

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:

How can I implement SF Pro Rounded text in Swift?

You want this: https://developer.apple.com/documentation/swiftui/font/system(_:design:weight:)

E.g.:

Text("My text")
    .font(.system(.largeTitle, design: .rounded, weight: .semibold))

How to implement UIKit: SF Pro Rounded?

Well with the code from original answer (How to use SF Rounded font in SwiftUI?), you can use it in your code like this:

    override func loadView() {
    let view = UIView()
    view.backgroundColor = .white

    let label = UILabel()
    label.frame = CGRect(x: 150, y: 200, width: 200, height: 32)
    label.text = "Hello World!"
    label.textColor = .black

    // set rounded font
    let fontSize: CGFloat = 32
    let systemFont = UIFont.systemFont(ofSize: fontSize, weight: .semibold)
    let roundedFont: UIFont
    if let descriptor = systemFont.fontDescriptor.withDesign(.rounded) {
        roundedFont = UIFont(descriptor: descriptor, size: fontSize)
    } else {
        roundedFont = systemFont
    }

    label.font = roundedFont

    view.addSubview(label)
    self.view = view
}

But when you want to use it on multiple places, it would be better if you could reuse it... so for example I create class called FontKit ... which has static function, which gives me rounded font. Like this:

class FontKit {

 static func roundedFont(ofSize fontSize: CGFloat, weight: UIFont.Weight) -> UIFont {
    let systemFont = UIFont.systemFont(ofSize: fontSize, weight: weight)
    let font: UIFont

    if #available(iOS 13.0, *) {
        if let descriptor = systemFont.fontDescriptor.withDesign(.rounded) {
            font = UIFont(descriptor: descriptor, size: fontSize)
        } else {
            font = systemFont
        }
    } else {
        font = systemFont
    }

    return font
}
}

And then in my code I use it like this:

label.font = FontKit.roundedFont(ofSize: 32, weight: .semibold)

How to make italic rounded style system text in SwiftUI?

SF Pro Rounded, the font that gets used when you specify .rounded, doesn't support italics. From the documentation:

SF Pro Rounded and SF Compact Rounded support:

• Uprights in nine weights — from Ultralight to Black

It doesn't say italics. Meanwhile, for SF Pro:

SF Pro and SF Compact support:

• Nine weights — from Ultralight to Black — in both uprights and italics

---

Related Topics