How to Use Dynamic Type with a Custom Font in SwiftUI

Every iOS Developer knows that creating amazing apps goes far beyond visually appealing design; it’s about building inclusive and accessible experiences for all users. In the world of Swift programming, one of the most powerful tools to achieve this is allowing your app’s text to adapt to the user’s visual preferences.

Today we are going to dive into a complete tutorial to master the use of Dynamic Type with a custom font in SwiftUI, ensuring that your iOS, macOS, and watchOS applications look spectacular without sacrificing accessibility.

What is Dynamic Type and why is it crucial?

Dynamic Type is an Apple operating system feature that allows users to choose their preferred text size on their devices. Some users prefer smaller text to see more information on the screen, while others with visual impairments need much larger text sizes.

Historically, when using default system fonts in SwiftUI, text scaled automatically as if by magic. However, when designers demanded custom typography to maintain brand identity, developers often hit a wall: custom fonts remained static and didn’t respond to system settings, completely breaking the accessibility experience. Fortunately, Swift and modern versions of Apple’s frameworks have solved this problem.

Step 1: Setting up your typography in Xcode

Before writing a single line of code, we need to prepare our project in Xcode. This process is identical whether you are developing for iOS, macOS, or watchOS.

1. Add font files: Drag your .ttf or .otf font files into the project navigator in Xcode.
2. Verify Target Membership: Select the font file and, in the right inspector panel, make sure to check the box corresponding to your app so the file is included in the final binary.
3. Update the Info.plist file: This step is vital. Go to your project settings or your Info.plist file and add a new key called “Fonts provided by application”. Inside this list, write the exact name of your font file, including its extension.

Important note: Make sure you know the actual internal name of the typography. Sometimes, the file name does not match the typographic name that SwiftUI requires to initialize the font. You can verify this by opening the file with the Font Book application on your Mac.

Step 2: The evolution towards automatic scaling

In early versions of SwiftUI, making a custom font dynamic required creating complex view modifiers that listened for environment changes. It was a tedious process.

Today, modern Swift programming offers us an elegant and straightforward solution through the relativeTo parameter in the font initialization. This parameter links your custom base size to a system text style (such as Title, Body, or Footnote), telling the operating system how to scale your typography when the user changes their preferences.

Step 3: Implementing Dynamic Type with a custom font in SwiftUI

Let’s write the code to see this in action. This same code will work universally across the entire Apple ecosystem.

import SwiftUI

struct CustomFontView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 20) {
            
            Text("Main Headline")
                // Here is the magic: we link a size 34 to the .largeTitle style
                .font(.custom("YourFont-Bold", size: 34, relativeTo: .largeTitle))
                .foregroundColor(.primary)
            
            Text("This is a subtitle that accompanies the main headline and provides additional context.")
                // We link a size 20 to the .title3 style
                .font(.custom("YourFont-Medium", size: 20, relativeTo: .title3))
                .foregroundColor(.secondary)
            
            Text("Body text is where users spend most of their time reading. If a user needs larger text, this paragraph will adjust perfectly without breaking the app's layout, thanks to being linked to the system's body text style.")
                // We link a size 16 to the default .body style
                .font(.custom("YourFont-Regular", size: 16, relativeTo: .body))
                
        }
        .padding()
    }
}

Understanding the code

By using .font(.custom("Name", size: Value, relativeTo: .style)), you are setting a base size. If the user has their device’s text size setting at the standard level, the body text will render at 16 points. If the user increases the text size in iOS accessibility settings, the system will use the scaling curve of the .body style to proportionally increase the 16 base points of your custom font.

Cross-platform considerations: macOS and watchOS

As a modern iOS Developer, you are likely designing apps that go beyond the iPhone. SwiftUI shines for its code reusability, but you must keep in mind the nuances of each platform:

On watchOS:
The Apple Watch screen is tiny. Here, Dynamic Type is not just an accessibility option; it is a usability necessity. Many users increase the text size on their watches simply to be able to read notifications while running or walking. When using the relativeTo modifier, make sure to use fonts that are highly legible at small sizes and avoid ultra-thin font weights.

On macOS:
Dynamic scaling on macOS works slightly differently than on iOS. Mac apps usually rely on more fixed interface settings, but users can still change their monitor’s scaled resolution or the default font sizes in certain apps. The Swift implementation we’ve written will natively respect macOS system settings, ensuring that desktop apps ported via Catalyst or designed natively with SwiftUI maintain their cohesion.

Design and layout best practices

Successfully implementing Dynamic Type with a custom font in SwiftUI is only half the battle. If your text grows, your interface must be prepared to accommodate it. Follow these golden rules:

1. Avoid fixed heights and widths: Never use modifiers like .frame(height: 50) on text containers. If the text grows due to accessibility and the container has a fixed size, the text will clip. Let SwiftUI calculate the intrinsic size.
2. Control text lines: Use the .lineLimit(nil) modifier to allow text to flow onto new lines indefinitely if it becomes too large to fit on a single horizontal line.
3. Use scalable spacers: Instead of hardcoding rigid spaces like .padding(.top, 20), consider using relative measurements or letting the VStack and HStack manage spacing dynamically with the spacing parameter.
4. Always test in Xcode Previews: Xcode allows you to preview your design with different Dynamic Type sizes directly in the Canvas. Simply add the .environment(\.sizeCategory, .accessibilityExtraExtraExtraLarge) modifier to your preview view to simulate the most extreme case.

Conclusion

Integrating custom typography used to be a headache for any developer concerned about accessibility. Today, thanks to continuous improvements in the framework, achieving the use of Dynamic Type with a custom font in SwiftUI is a clean, declarative, and extremely powerful process.

By adopting these practices in your Swift programming workflow, you are not only creating more aesthetic applications that adhere to your team’s design guidelines, but you are also opening your product’s doors to thousands of users who rely on assistive technology every day.