Swiftui Won't Display Custom Font

SwiftUI won't display custom font

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

Note if you are using Xcode 13 you may not have an Info.plist where you expect. This SO answer explains where you can find it.

That the font is available in the app's target.

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

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.

Custom font not showing up in SwiftUI

Here is my steps (demo prepared & tested with Xcode 12 / iOS 14):

1. taken font for demo from http://fdempreendimentos.com.br/assets/fonts/Seravek-Bold.ttf

2. drag & drop into project & mark checkbox to include to app target

3. Registered font with Info.plist

4. Demo content view

struct TestSeravekFont: View {
    var body: some View {
        Text("Hello, World! Specific Qij")
            .font(Font.custom("Seravek Bold", size: 40))
    }
}

5. Output

Here is how font looks in Font Manager, so we see that this is it. Done.

How do I add custom fonts in swiftui?

Add custom font to your project and register it in .plist
https://developer.apple.com/documentation/uikit/text_display_and_fonts/adding_a_custom_font_to_your_app

Then define

extension Font {
    struct Event {
        let name = Font.custom("GillSans-UltraBold", size: 14)
        let location = Font.custom("GillSans-SemiBold", size: 10)
        let date = Font.custom("GillSans-UltraBold", size: 16)
        let price = Font.custom("GillSans-SemiBoldItalic", size: 12)
    }
    static let event = Event()
}

Example usage:

Text("iPhone 12 Pro Super Max").font(Font.event.name)

custom font not displaying on some simulator

1. Delete application from simulator
2. Clean (by hitting "CMD + K" in Xcode)
3. Run again

Is it possible to use dynamic type sizes with a custom font in SwiftUI?

I stumbled upon a nice way to achieve this also via ViewModifier. I borrowed the base modifier from this Hacking With Swift's article on Dynamic Type and Custom Fonts. Here's the result:

import SwiftUI

@available(iOS 13, macCatalyst 13, tvOS 13, watchOS 6, *)
struct CustomFont: ViewModifier {
    @Environment(\.sizeCategory) var sizeCategory

    var name: String
    var style: UIFont.TextStyle
    var weight: Font.Weight = .regular

    func body(content: Content) -> some View {
        return content.font(Font.custom(
            name,
            size: UIFont.preferredFont(forTextStyle: style).pointSize)
            .weight(weight))
    }
}

@available(iOS 13, macCatalyst 13, tvOS 13, watchOS 6, *)
extension View {
    func customFont(
        name: String,
        style: UIFont.TextStyle,
        weight: Font.Weight = .regular) -> some View {
        return self.modifier(CustomFont(name: name, style: style, weight: weight))
    }
}

And usage:

Text("Hello World!")
    .customFont(name: "Georgia", style: .headline, weight: .bold)

This way you can stick to bundled Text Styles without needing to provide sizes explicitly. Should you want to do so, the font modifier already allow us to, and the scaling could be handled through one of the alternative approaches given to this question.

Also, please note that because the styling is applied within a ViewModifier conformant struct, which in turn responds to changes to the environment's sizeCategory, the views will reflect changes to the accessibility settings right upon switching back to your app; so there's no need to restart it.

---

Related Topics