Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
250 views
in Technique[技术] by (71.8m points)

ios - SwiftUI won't display custom font

I'm currently trying to add a custom font to my project, but I somehow won't work.

I've already added the .otf file to a font folder, checked that it targets to my project and added Fonts provided by application to Info.plist.

struct ContentView: View {
    var body: some View {
        Text("CLOSEST")
          .foregroundColor(Color("primary"))
          .font(Font.custom("HelveticaNowDisplayBold", size: 60))
    }
}
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

If you have made sure that the Info.plist is using the correct filename

enter image description here

and that the font is available in the app's target.

enter image description here

You also need to make sure that you are accessing the font by the correct name.

An easy way to check the font's name is to add the following to your AppDelegate in the didFinishLaunchingWithOptions before the return true. Or if you are using the new SwiftUI lifecycle you can add it to an .onAppear.

for family in UIFont.familyNames.sorted() {
    let names = UIFont.fontNames(forFamilyName: family)
    print("Family: (family) Font names: (names)")
}

This will list all the fonts by family and name.

Just remember to remove it once you have finished using it as you don't need to unnecessarily print to the console.

When I do it for my fonts (I have added the same font as you) I find the following in the console in the list of available fonts (see the above screenshot) :

Family: Helvetica Now Display Font names: ["HelveticaNowDisplay-Bold"]

Your font may have a different name to mine, and it is important to note that the font name may not be the same as the filename. This is what trips up a lot of people, as they try using the filename when they need to use the font name.

The following test code produces:

struct ContentView: View {
    var body: some View {
        Text("Hello")
            .foregroundColor(.blue)
            .font(Font.custom("HelveticaNowDisplay-Bold", size: 60))
    }
}

enter image description here

For more information about adding custom fonts see Apple's documentation.


Dynamic Type in SwiftUI

If you are using a custom font then you should consider setting it up so that it will scale with dynamic type.

iOS 14

iOS 14 introduces a new modifier that allows you to scale a font relative to a Dynamic Font Type.

Text("Hello")
    .font(.custom("HelveticaNowDisplay-Bold", size: 60, relativeTo: .body))

iOS 13

If you are using iOS 13 that requires a bit more effort to get the same effect.

You first need to create a ViewModifier. This view modifier listens to the size category from the environment (it doesn't actually use it but having it here makes sure the view modifier is updated whenever the size category is updated).

struct ScaledFont: ViewModifier {
    @Environment(.sizeCategory) var sizeCategory
    var name: String
    var size: CGFloat

    func body(content: Content) -> some View {
       let scaledSize = UIFontMetrics.default.scaledValue(for: size)
        return content.font(.custom(name, size: scaledSize))
    }
}

extension View {
    func scaledFont(name: String, size: CGFloat) -> some View {
        return self.modifier(ScaledFont(name: name, size: size))
    }
}

It is then used in the following way:

Text("Hello")
    .scaledFont(name: "HelveticaNowDisplay-Bold", size: 60)

For a really good write up check out this post on Hacking With Swift.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...