CODEWITHSUNDEEP
swiftfontsswiftui
LinusG.
LinusG.

Reputation: 28952

Custom font size for Text in SwiftUI

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?

Upvotes: 136

Views: 145853

Answers (7)

Richard Torcato
Richard Torcato

Reputation: 2770

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))

Upvotes: 0

humi.dev
humi.dev

Reputation: 176

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))
    }
}

Upvotes: 6

Bug Hunter Zoro
Bug Hunter Zoro

Reputation: 1915

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))

Upvotes: 15

Arjun Patel
Arjun Patel

Reputation: 1510

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

Upvotes: 40

NRitH
NRitH

Reputation: 13903

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

.font(.system(size: 60))

Upvotes: 285

Anjali Kevadiya
Anjali Kevadiya

Reputation: 3917

You can set custom font size like this,

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

Upvotes: 41

XYZ
XYZ

Reputation: 27427

// 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

Upvotes: 8

Related Questions