Custom font size for Text in SwiftUI

Question

I have a label in my view that I want to use the system font size in medium, with a size of 21 points.
I created a custom extension to re-use the font created:

extension Font {
    static var primaryButton: Font {
        return Font.custom("SFUIDisplay-Light", size: 21)
    }
}

However, this does not have any effect. I changed the string to HelveticaNeue-UltraLight and it did work, so I'm guessing that SFUIDisplay-Light is simply the incorrect font name.
In font book, it says SFProText-Light, but that also did not work for me.

What is the correct font name of the San Francisco font in SwiftUI?
Or: how can I set the font size using the system font?

score 264 · Accepted Answer · edited Mar 02 '20 at 08:51

264

You can set an explicit size for the system font with:

.font(.system(size: 60))

edited Mar 02 '20 at 08:51

Samuel Liew

76,741
107
159
260

answered Jun 05 '19 at 17:20

NRitH

13,441
4
41
44

5

But what is the issue with his code? What if he wants to use something other than the system font? – Zorayr May 09 '20 at 22:52
let view = { ... } ; return condition ? view.font(.system(size: 60)) : view.font(.custom("CUSTOM_FONT_NAME", size: 60)) – Jared Updike Jan 14 '23 at 15:17

Anjali Kevadiya · Answer 2 · 2019-08-28T21:40:28.737

41

You can set custom font size like this,

.font(.custom("FONT_NAME", size: 20))

edited Aug 28 '19 at 21:40

answered Jun 12 '19 at 20:03

Anjali Kevadiya

3,567
4
22
43

1

I tried Font.custom("SFProText-Bold", size: 16) which is not working – Ekambaram E Nov 12 '19 at 12:26
1

@EkambaramE Make sure you give the Font Name properly, not Font file name. – Kannan Prasad Jan 09 '20 at 18:18
@KannanPrasad is "SFProText-Bold" the wrong font name? – Zorayr May 09 '20 at 22:59
2

Careful with custom font names. I had a MacOS UIKit app that used a font that (unknown to me) was installed by Microsoft Office rather than default with MacOS. Worked fine on my Mac but my text field showed blank on other Macs without the specific font installed. – Darrell Root Feb 06 '22 at 20:05

Arjun Patel · Answer 3 · 2020-03-02T11:13:59.563

Text("Default font design").font(Font.system(size:30, design: .default))
Text("Monospaced font design").font(Font.system(size:30, design: .monospaced))
Text("Rounded font design").font(Font.system(size:30, design: .rounded))
Text("Serif font design").font(Font.system(size:30, design: .serif))

Text("Large Title").font(.largeTitle)
Text("Title").font(.title)
Text("Headline").font(.headline)
Text("SubHeadline").font(.subheadline)
Text("Body").font(.body)
Text("Callout").font(.callout)
Text("Caption").font(.caption)
Text("FootNote").font(.footnote)

Text("Custom font").font(Font.custom("OpenSans-Bold", size: 12.3))

more detail Please follow: https://github.com/arjun011/SwiftUI-Controls

score 15 · Answer 4 · answered Jan 08 '21 at 01:25

If you want to set a custom font for your text let's say Helvetica Neue then in that case you can do something like this

Text("Hello World")
.font(.custom("Helvetica Neue", size: 20))

If you just want to go with system font then in that case you can do something like this

Text("Hello World")
.font(.system(size: 20, weight: .light, design: .default))

score 8 · Answer 5 · answered Jun 30 '19 at 06:47

// Using system font "San Francisco"
let fontSystem = Font.system(size: 13.0)

// Using installed custom font
let fontCustom = Font.custom("YOUR FONT NAME", size: 13.0)

You can place the font* constant to where you need to set the font style.

Read more from "Getting System Fonts" section in https://developer.apple.com/documentation/swiftui/font

score 2 · Answer 6 · answered Mar 13 '23 at 09:46

If you are like me searching for an option to add a system font with specific size, that also scales for Dynamic Type:

//Usage:
Text("Hello World").systemFont(size: 8.0, relativeTo: .caption, weight: .semibold)

extension View {
    func systemFont(size: CGFloat, relativeTo textStyle: Font.TextStyle, weight: Font.Weight = .regular) -> some View {
        modifier(SystemText(size: size, relativeTo: textStyle, weight: weight))
    }
}
struct SystemText: ViewModifier {
    @ScaledMetric var fontSize: CGFloat
    private let weight: Font.Weight

    init(size: CGFloat, relativeTo textStyle: Font.TextStyle, weight: Font.Weight = .regular) {
        _fontSize = ScaledMetric(wrappedValue: size, relativeTo: textStyle)
        self.weight = weight
    }

    func body(content: Content) -> some View {
        content.font(.system(size: fontSize).weight(weight))
    }
}

score 0 · Answer 7 · answered Apr 03 '23 at 17:51

This is how I do it.

HStack {
 Text("hello world")
  .customFont(AppFonts.WorkSansSemiBold())
   .foregroundColor(Color(.label))
 }

and the magic is here

import SwiftUI

public enum AppFonts {
    case WorkSansSemiBold(size: CGFloat = 20)
    case WorkSansMedium(size: CGFloat = 17)
    case WorkSansBold(size: CGFloat = 34)
    
    var rawValue: Font? {
        switch self {
        case .WorkSansSemiBold(let size):
            return Font.custom("WorkSans-SemiBold", size: size)
        case .WorkSansBold(let size):
            return Font.custom("WorkSans-Bold", size: size)
        case .WorkSansMedium(size: let size):
            return Font.custom("WorkSans-Medium", size: size)
        }
    }
}

extension View {
    func customFont(_ customFont: AppFonts) -> some View {
        self.font(customFont.rawValue)
    }
}

and then when I need a custom size

.customFont(AppFonts.WorkSansSemiBold(size: 14))

take a look at "Variable Font", it makes things even simpler, it allows you to use the .fontWeight(.semibold) or else with a single font file. — Nicolas Manzini, Jun 02 '23 at 08:57

Custom font size for Text in SwiftUI

7 Answers7

Linked