Patrik Svoboda
Patrik Svoboda

Reputation: 211

How to use SF Rounded font in SwiftUI?

I am trying to use the SF rounded font in my SwiftUI project, how would you set it?

I already tried messing around with the .font() but it didn't work (I wasn't able to set it to this rounded font)

Upvotes: 20

Views: 21340

Answers (6)

heyfrank
heyfrank

Reputation: 5647

iOS >16.1

Use fontDesign(.rounded)

Text("Hello, World!")
    .fontDesign(.rounded)

Upvotes: 6

Jad Chaar
Jad Chaar

Reputation: 981

Thought I'd add an extra use case: if you would like to apply a custom font weight to your rounded SF font on something like a text field, while still maintaining dynamic font scaling, you can do the following:

TextField("test", $test)
    .font(Font.system(.largeTitle, design: .rounded).weight(.heavy))

This is required since one cannot call .fontWeight() directly on a TextField (at least as of iOS 13).

Upvotes: 8

Belle B. Cooper
Belle B. Cooper

Reputation: 395

Doing it this way works for me on a Text object in SwiftUI:

.font(.system(size: 13.0, weight: .regular, design: .rounded))

Upvotes: 12

user5669940
user5669940

Reputation:

Converted the UIKit answer by @Pomme2Poule into a function for easy use, should anyone need it. Function uses dynamic type too, so it'll scale with the font size.

func roundedFont(ofSize style: UIFont.TextStyle, weight: UIFont.Weight) -> UIFont {
    // Will be SF Compact or standard SF in case of failure.
    let fontSize = UIFont.preferredFont(forTextStyle: style).pointSize
    if let descriptor = UIFont.systemFont(ofSize: fontSize, weight: weight).fontDescriptor.withDesign(.rounded) {
        return UIFont(descriptor: descriptor, size: fontSize)
    } else {
        return UIFont.preferredFont(forTextStyle: style)
    }
}

Upvotes: 8

Clément Cardonnel
Clément Cardonnel

Reputation: 5257

I know the question is about SwiftUI, but I thought it could be helpful to also include an UIKit answer.

let fontSize: CGFloat = 24

// Here we get San Francisco with the desired weight
let systemFont = UIFont.systemFont(ofSize: fontSize, weight: .regular)

// Will be SF Compact or standard SF in case of failure.
let font: UIFont

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

Upvotes: 47

Fabio Giolito
Fabio Giolito

Reputation: 646

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

Upvotes: 63

Related Questions