Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set a custom font family as the default for an entire app in SwiftUI

Tags:

ios

swiftui

In SwiftUI you get all these handy little Font convenience accessors like Font.caption, Font.title, Font.body, etc..

e.g.

VStack {
 Text("Some Title").font(Font.title)
 Text("Some Caption Text").font(Font.caption)
}

They all specify different font styles for the default Helvetica font family. I'd like to use these very helpful convenience accessors without ever using Helvetica in my app. Can I change the default font family? Or do I constantly have to apply custom fonts like e.g.:

Text("Custom Text").font(Font.custom("SourceSansPro-Regular", size: 14.0)

like image 985
Mete Avatar asked Oct 14 '19 11:10

Mete


People also ask

How do I use custom fonts in SwiftUI?

To use a custom font, add the font file that contains your licensed font to your app, and then apply the font to a text view or set it as a default font within a container view. SwiftUI's adaptive text display scales the font automtically using Dynamic Type.

How do I change the text family in SwiftUI?

Setting Text and Changing Fonts The most basic way we can add text in SwiftUI is by the use of Text() so to make it easy lets just use this as example. Text("Hello, world!") Changing Font is easy, you just need to use the dot notation called . font which accepts a Font type value.

What is the default SwiftUI font?

SwiftUI lets you customize Text by applying a . font() modifier. The default iOS font is called San Francisco and if you don't explicitly change it, then all of your text will have the default iOS look. Some other options of standard fonts include: title, headline, subheadline, body, callout, caption or footnote.


1 Answers

You can override the system font if you want.

    extension Font {
    
    /// Create a font with the large title text style.
    public static var largeTitle: Font {
        return Font.custom("OpenSans-Regular", size: UIFont.preferredFont(forTextStyle: .largeTitle).pointSize)
    }

    /// Create a font with the title text style.
    public static var title: Font {
        return Font.custom("OpenSans-Regular", size: UIFont.preferredFont(forTextStyle: .title1).pointSize)
    }

    /// Create a font with the headline text style.
    public static var headline: Font {
        return Font.custom("OpenSans-Regular", size: UIFont.preferredFont(forTextStyle: .headline).pointSize)
    }

    /// Create a font with the subheadline text style.
    public static var subheadline: Font {
        return Font.custom("OpenSans-Light", size: UIFont.preferredFont(forTextStyle: .subheadline).pointSize)
    }

    /// Create a font with the body text style.
    public static var body: Font {
           return Font.custom("OpenSans-Regular", size: UIFont.preferredFont(forTextStyle: .body).pointSize)
       }

    /// Create a font with the callout text style.
    public static var callout: Font {
           return Font.custom("OpenSans-Regular", size: UIFont.preferredFont(forTextStyle: .callout).pointSize)
       }

    /// Create a font with the footnote text style.
    public static var footnote: Font {
           return Font.custom("OpenSans-Regular", size: UIFont.preferredFont(forTextStyle: .footnote).pointSize)
       }

    /// Create a font with the caption text style.
    public static var caption: Font {
           return Font.custom("OpenSans-Regular", size: UIFont.preferredFont(forTextStyle: .caption1).pointSize)
       }

    public static func system(size: CGFloat, weight: Font.Weight = .regular, design: Font.Design = .default) -> Font {
        var font = "OpenSans-Regular"
        switch weight {
        case .bold: font = "OpenSans-Bold"
        case .heavy: font = "OpenSans-ExtraBold"
        case .light: font = "OpenSans-Light"
        case .medium: font = "OpenSans-Regular"
        case .semibold: font = "OpenSans-SemiBold"
        case .thin: font = "OpenSans-Light"
        case .ultraLight: font = "OpenSans-Light"
        default: break
        }
        return Font.custom(font, size: size)
    }
}
like image 155
Justin Miller Avatar answered Sep 28 '22 06:09

Justin Miller