Adding custom fonts to your iOS app

When developing an app for iOS, you may want to use a custom font to conform to the style guide of a brand. Xcode contains over 50 different fonts by default, but if you want to use your own font, some configurations are needed to get started.

Do you need some inspiration for a font? Google created the website Google Fonts, where open-source fonts are listed and can be downloaded for free.

Setup the custom font in Xcode

Before we are able to use the custom font, we need to do some configuration in Xcode. Xcode supports two different font files, which are True Type Font (.ttf) and Open Type Font (.otf) files. To get started, add the font files to your project using Xcode. Be sure that you copy the files inside your project and that those font files are target members of your app.

When the font files are inside the project, we need to register them before we are able to use it. The registration of font files must be done in the info.plist file.

Open the info.plist file and add a new property named ‘Fonts provided by application’. The raw key of this property is UIAppFonts. When the property is added, the property ‘Fonts provided by application’ can be expanded and an empty item will appear.

The value of item 0 should be the filename of the font you want to register, including the file extension (.ttf or .otf). If you want to add multiple fonts, just press the plus button and add those filenames too. When finished, your info.plist may look like the example below.

Now your font is added and registered, you are able to use your custom font inside your app!

Using a custom font in UIKit

When using a custom font in UIKit, there are two options. When using XIB files, you can simply select the font in the Xcode Organizer after registering.

The second option is to change the font using code. To do this, just set the font property of a label with the custom font.

Example:

titleLabel.font = UIFont(name: "LiuJianMaoCao-Regular", size: 20)

To prevent making a typo, make an extension on UIFont with the available custom fonts. In the example below, the enum FontStyle will contain all custom fonts. In the UIFont extension, a new init is created which will initialize the UIFont object.

Example:

enum FontStyle: String {
    case liuJianMaoCao = "LiuJianMaoCao-Regular"
}

extension UIFont {
    public convenience init?(fontStyle: FontStyle, size: CGFloat) {
        self.init(name: fontStyle.rawValue, size: size)
    }
}

When using the extension above, a UIFont can be set without worries on a typo.

Example:

titleLabel.font = UIFont(fontStyle: .liuJianMaoCao, size: 20)

By default, the dynamic fonts setting is disabled. Read my blog post about accessibility to learn how you can enable dynamic font sizes for custom fonts.

Using a custom font in SwiftUI

To use a custom font in SwiftUI, simply use the .font function on a Text view to change the font type.

Example:

Text("Hello, World!")
   .font(Font.custom("LiuJianMaoCao-Regular", size: 20))

If you want to prevent making a typo, I suggest creating an extension on Font. Inside the extension, create a static function with the font name, which contains a parameter with the font-size, allowing it to be different for each view. The below code example is an extension on Font for the LiuJianMaoCao font.

Example:

extension Font {
    static func liuJianMaoCao(size: CGFloat) -> Font {
        Font.custom("LiuJianMaoCao-Regular", size: size)
    }
}

struct ContentView: View {
    var body: some View {
        Text("Hello, World!").font(Font.liuJianMaoCao(size: 20))
    }
}

Conclusion

Adding a custom font to your iOS app is simple for both UIKit and SwiftUI. When adding a custom font to your project, don’t forget to register the font inside the info.plist, because otherwise the font can’t be found!

What’s next? Well… you can read my blog post about accessibility to learn more about custom fonts and supporting dynamic sizes!

🚀 Like this article? Follow me on Twitter for more iOS related blogs!