How to Add Custom Font to SwiftUI

As an iOS Developer, you know that user interface and user experience (UI/UX) are fundamental to the success of any application in the Apple ecosystem. Although the San Francisco font (Apple’s default typography) is exceptionally readable and aesthetically pleasing, projects often require a unique visual identity. This is where the need to add a custom font in SwiftUI comes into play.

Mastering Swift programming involves not only knowing the logic behind the code but also knowing how to manipulate visual resources and integrate them efficiently. In this comprehensive tutorial, you will learn step-by-step how to implement custom typography in your SwiftUI projects, ensuring they work flawlessly in universal applications designed for iOS, macOS, and watchOS using Xcode.

Throughout this article, we will explore everything from preparing font files to writing the code in Swift, passing through the essential configuration in your project files. Get ready to take the design of your applications to the next level.

The Importance of Typography in App Development

Before diving into SwiftUI code and Xcode configurations, it is crucial to understand why typography is so important. A well-chosen font can convey a brand’s personality, improve readability, and guide the user’s attention toward primary actions (Call to Action).

In modern Swift programming, Apple has made creating declarative interfaces significantly easier. However, handling external resources like fonts still requires a specific process. A good iOS Developer must be able to configure these resources correctly to avoid runtime errors, such as the font failing to load and the system silently falling back to the default typography.

Step 1: Obtain and Prepare Font Files

The first step to add a custom font in SwiftUI is having the font files you want to use. The most common formats that are fully compatible with iOS, macOS, and watchOS are:

• TrueType Font (.ttf)
• OpenType Font (.otf)

You can download free and open-source fonts from platforms like Google Fonts or purchase commercial licenses from type foundries. For this tutorial, let’s assume you have downloaded a font named MyAwesomeFont-Regular.ttf and its bold variant MyAwesomeFont-Bold.ttf.

Expert tip: Before dragging the files into your project, make sure the file name is clean and does not contain spaces or strange special characters. This will make it much easier to reference later in your Swift code.

Step 2: Import Fonts into Xcode

Once you have your .ttf or .otf files, it is time to integrate them into your development environment, Xcode. This step is deceptively simple, but it is where many beginners in Swift programming make their first mistake.

1. Open your project in Xcode.
2. In the Project Navigator (the left panel), right-click and select New Group. Name this folder Fonts or Resources. This is optional, but keeping your project organized is a best practice for any iOS Developer.
3. Drag your font files (MyAwesomeFont-Regular.ttf and MyAwesomeFont-Bold.ttf) from the Finder into the newly created folder in Xcode.
4. A dialog box with several options will appear. Here is the critical step:
   • Check the “Copy items if needed” box. This ensures the files are physically copied into your project folder.
   • In the “Add to targets” section, make sure to check the boxes corresponding to all the targets where you will use the font. If you are building a cross-platform app, you must select your iOS app target, the watchOS extension, and the macOS target. If you skip this, the application will compile, but the font will not render because the file was not included in the final bundle of that specific platform.

Step 3: Register Fonts in the Info.plist

For the operating system (whether iOS, macOS, or watchOS) to know that your application includes custom fonts and load them into memory, you must explicitly declare them in the project’s configuration file.

Historically, this was done by directly editing the Info.plist file. In recent versions of Xcode, this is managed from the Info tab of your Target. Since we are developing for multiple platforms, there is a slight difference in how it is declared for macOS versus iOS/watchOS.

Configuration for iOS and watchOS

1. Select your iOS app target in the project settings.
2. Go to the Info tab.
3. Click the + button that appears when hovering over any existing row to add a new key.
4. Type “Fonts provided by application” (the internal name for the key is UIAppFonts).
5. This key is an Array. Expand the row and, for Item 0, type exactly the name of your font file, including the extension. For example: MyAwesomeFont-Regular.ttf.
6. Click the + next to Item 0 to add Item 1 and type MyAwesomeFont-Bold.ttf.
7. Repeat this exact process for your watchOS app target (or the watchOS extension).

Configuration for macOS

The Mac platform handles fonts slightly differently.

1. Select your macOS target.
2. Go to the Info tab.
3. Add a new key named “Application fonts resource path” (the internal name is ATSApplicationFontsPath).
4. Unlike iOS, where you list every single file, in macOS you simply need to indicate the name of the directory where the fonts are located relative to the Resources folder of the bundle. If you placed your fonts in the root of the project (or in a logical group that is not a real folder reference), you can just put a dot . to indicate the root.

Step 4: Discover the Real Font Name (PostScript Name)

This is the best-kept secret and the biggest point of frustration when adding a custom font in SwiftUI. The file name (MyAwesomeFont-Regular.ttf) is not necessarily the name you should use in your Swift code.

SwiftUI (and UIKit/AppKit) expect the font’s PostScript name. How do you find it? You have two options.

Option A: Use the Font Book app on your Mac
Open the font file with the macOS Font Book app, select the font, click the information (i) button, and look for the “PostScript name” field.

Option B: Print available fonts via Swift programming
Like a good iOS Developer, you can write a short temporary snippet of code to list all fonts loaded into the system. Place this in the init of your main view or in the AppDelegate:

init() {
    for family in UIFont.familyNames {
        print("Family: \(family)")
        for name in UIFont.fontNames(forFamilyName: family) {
            print("   - PostScript Name: \(name)")
        }
    }
}

(Note: For macOS, you would use NSFontManager.shared.availableFontFamilies instead of UIFont, since UIFont is exclusive to UIKit).

When running the application, check the Xcode debug console. You might discover that the actual PostScript name is MyAwesomeFont-Reg instead of the file name. We will use this PostScript name in the next step.

Step 5: Apply the Custom Font in SwiftUI

The moment of truth has arrived! Now that the font is integrated into Xcode and registered across platforms, using it in SwiftUI is incredibly elegant thanks to its declarative syntax.

To apply your font to a text component, you will use the .font(.custom(name:size:)) modifier.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("Hello, Apple Ecosystem")
                .font(.custom("MyAwesomeFont-Bold", size: 32))
                .foregroundColor(.blue)
            
            Text("This is a demonstration of how to add a custom font in SwiftUI to make your apps stand out.")
                .font(.custom("MyAwesomeFont-Regular", size: 18))
                .multilineTextAlignment(.center)
                .padding()
        }
    }
}

With this simple Swift code, your view will render the texts using the typography you have imported. This exact same code will work seamlessly on iOS, macOS, and watchOS if you have properly followed the registration of the targets and the .plist files.

Step 6: Best Practices – Creating Extensions and ViewModifiers

Typing the font name as a String (“MyAwesomeFont-Regular”) repeatedly across dozens of views is not scalable and is prone to typos. An experienced iOS Developer in Swift programming always seeks to make their code safer, cleaner, and more reusable.

To optimize this, we can create an extension on the Font struct in Swift.

import SwiftUI

extension Font {
    enum MyAwesomeFont {
        static func regular(size: CGFloat) -> Font {
            return .custom("MyAwesomeFont-Regular", size: size)
        }
        
        static func bold(size: CGFloat) -> Font {
            return .custom("MyAwesomeFont-Bold", size: size)
        }
    }
}

Now, in your SwiftUI views, the code becomes much cleaner, auto-completable by Xcode, and compile-time safe:

struct CustomFontView: View {
    var body: some View {
        Text("Clean and Safe Text")
            .font(.MyAwesomeFont.bold(size: 24))
    }
}

Accessibility: Supporting Dynamic Type

One of Apple’s pillars is accessibility. When you use custom fonts by giving them a fixed size (size: 24), you lose the Dynamic Type behavior, the feature that allows users to increase the text size system-wide.

To add a custom font in SwiftUI professionally and respect Dynamic Type, you should provide a relativeTo parameter:

Text("Accessible Text")
    .font(.custom("MyAwesomeFont-Regular", size: 18, relativeTo: .body))

This way, the base size will be 18 points, but if the user increases the text size in the accessibility settings of their iPhone, Mac, or Apple Watch, your custom font will scale proportionally based on the .body style.

Troubleshooting Common Issues

If the font does not show up and the text appears with Apple’s default typography, run through this quick checklist:

1. Target Membership: Select the font file in Xcode and make sure the right panel (File Inspector) has the checkbox for your current Target (iOS, macOS, or watchOS) checked.
2. Typos in the Info.plist: A single extra space or a wrong letter in the file name under the Fonts provided by application key will prevent it from loading.
3. Incorrect PostScript Name: Remember, the SwiftUI modifier .custom("Name", size: x) requires the PostScript name of the font (discovered in Step 4), not the file name.
4. Do not forget the extension in the Plist: In the Info.plist, you must include .ttf or .otf. In your Swift code (in the .font modifier), you must NOT include the extension.

Conclusion

Knowing how to add a custom font in SwiftUI is an essential skill in the repertoire of any iOS Developer. Although the Apple ecosystem provides us with wonderful tools and readable default typography, visual customization is key to standing out in the competitive App Store market.

By mastering this process through Xcode and Swift programming, you can unify a brand’s visual identity simultaneously across iOS, macOS, and watchOS. You have learned not only the technical implementation but also best practices, such as creating safe type extensions and implementing dynamic scaling to maintain accessibility.