Overview

In this chapter, we will explore how to load and apply fonts in Rive animations.

This approach is especially helpful when you want to reuse the same animation across multiple variants of an app that differ only in the fonts they use.

The same concept discussed in the previous chapter applies here as well, assets should be reused efficiently to keep the app bundle size as small as possible.

Getting the Fonts

For this tutorial, I chose the ScienceGothic-Regular font from Google Fonts. However, the process is exactly the same if you prefer to use your own custom font.

Once you've selected the font you want to use, drag and drop the font file (or files) into your app’s project folder. Be sure to copy the files into the project if prompted.

Setting the Fonts

Next, we need to let the app know which fonts are available for use. To do this, navigate to Project Settings > Targets > Your Target > Info.

There, add the Fonts provided by application key property and list each font you want to include.

Below is the configuration I'm using:

<dict>
	<key>UIAppFonts</key>
	<array>
		<string>ScienceGothic-Regular.ttf</string>
	</array>
</dict>
</plist>

Loading and Applying the Fonts

The next step is to load the fonts into our Rive view model instance.

To do this, we'll build upon the DataBindingViewModel class introduced in the previous chapter by extending its initializer to handle loading and assigning fonts.

Below is an example of how this can be implemented:

import SwiftUI
import RiveRuntime
 
nonisolated class DataBindingViewModel: RiveViewModel {
    [...]
 
    init(filename: String, font: String, withExtension: String) {
        super.init(fileName: filename) { asset, data, factory in
            if let asset = asset as? RiveFontAsset {
                guard let url = Bundle.main.url(forResource: font, withExtension: withExtension) else {
                    fatalError("Failed to locate '\(asset.uniqueName())' in bundle.")
                }
 
                guard let data = try? Data(contentsOf: url) else {
                    fatalError("Failed to load \(url) from bundle.")
                }
 
                asset.font(factory.decodeFont(data))
                return true
            }
 
            return false
        }
 
        [...]
    }
}

Updating the View

Once the view model has been updated, we can pass the desired font into its initializer so it can be applied to the animation.

import SwiftUI
import RiveRuntime
 
struct DataBindingView: View {
    
    // MARK: ViewModels
    /// RiveViewModels are the main point of contact with the RiveRuntime. They are
    /// the bridge between the file and the image that displays.
    @StateObject private var vm = DataBindingViewModel(
        filename: "text-localization",
        font: "ScienceGothic-Regular",
        withExtension: ".ttf"
    )
 
    var body: some View {
        vm.view()
        
        [...]
    }
}

Here's what the app looks like when using the ScienceGothic-Regular font:

Loading and applying fonts in Rive animations.

In case you are interested in the source code, feel free to check out the repository.

🤝 Wrapping Up

In this chapter, we learned how to load and use custom fonts in Rive animations. While this only scratches the surface of what's possible with font customization, it provides a solid foundation to build upon.

In the next chapter, we'll take a look at how to add fallback font support in Rive.

References

• Google Fonts
• Swapping fonts at runtime
• Loading assets