Custom Fonts: Getting Started

Installing a Font

In a production app, you’ll want to choose one — at a stretch, two — fonts to convey your brand’s feel and personality. However, for this tutorial, there are three pre-selected fonts included in your materials starter folder. These fonts are probably not suitable for body text in a production app, but they’re good for demonstration purposes.

Drag Prata-Regular.ttf from the tutorial resources’ starter folder into the Fonts folder in Xcode. Select Copy items if needed and also select the ReadingList target in the Add to targets list:

Now, open Info.plist and add a key by hovering over any row and clicking the + button. Then choose Fonts provided by application for the new key. Whenever you add a custom font, you need to insert an element into the array for this key. So, set the value of Item 0 in the array to Prata-Regular.ttf:

Your first font is now installed and ready to use within the app. Repeat the steps above for the other two fonts included in your starter folder: StyleScript-Regular.ttf and Texturina.ttf.

You now have all three fonts included in the project!

Build and run. Although there are no build errors, there’s also no visual change. So now it’s time to use the installed font!

Using Custom Fonts in Storyboards

Open Main.storyboard and click the Swift Apprentice label in the BookListViewController. In the Attributes inspector, click the font icon next to the font name. Click the Font drop-down and change it from System to Custom. Click the Family drop-down and choose Texturina. Keep the Style drop-down as Regular and set the Size to 16:

You’ll see the font of your label has already changed in the storyboard! Build and run your app to confirm this:

In the image above, you can see the change to the font of the “Swift Apprentice” label. Neat!

That’s great, but it’s only Storyboards. There are more ways to use text in iOS!

Using Custom Fonts in UIKit Programmatically

So you now know how to use a custom font in storyboards. But what if you want to use a custom font in a UI element created using UIKit?

The second book title label in the list is created programmatically outside of the Storyboard. You’ll use another font for this label.

First, you need to find the name of the font. It’s not necessarily the same as the filename of the font. After all, you could change the filename! So you’ll add some code that lists the names of fonts available to the app.

Open BookListViewController.swift and add the following code inside viewDidLoad():

for family in UIFont.familyNames.sorted() {
  let names = UIFont.fontNames(forFamilyName: family)
  print("Family: \(family) Font names: \(names)")
}

Build and run. The code above prints out to the console the font family and name of all the fonts available:

Search for Style Script in the console. You’ll see that its name is StyleScript-Regular. This is a key that you can use to refer to the font when you want to use it in your app.

This time, the name of the font happens to be the same as the filename, but next time, you might not be so lucky! Now that you’ve got the name, delete the code you just added.

Now, it’s time to apply the font to your second label.

But wait! What if you have multiple UI elements that require custom fonts? If a designer comes along and decides that the font you used isn’t right, you’re going to have to spend ages trawling through the app finding all the places where you used the font. What a nightmare! For this reason, it’s always best practice to have a single source of truth.

In this case, you’ll extend UIFont and create a single source of truth for the font used within your app.

In the Extensions folder, open UIFont+CustomFont.swift, and place the following static method inside the extension:

static func scriptFont(size: CGFloat) -> UIFont {
  guard let customFont = UIFont(name: "StyleScript-Regular", size: size) else {
    return UIFont.systemFont(ofSize: size)
  }
  return customFont
}

This returns an instance of your custom font at a given size. However, if the font file fails to load, it returns the system font as a fallback. Notice that you’re using the name of the font you found earlier, namely StyleScript-Regular.

To use this with your second label, open BookListViewController.swift. In addSecondBookLabel, add the following above view.addSubview(label):

label.font = UIFont.scriptFont(size: 16)

This uses the method you just added to obtain the script font with a size of 16.

Build and run.

You can see that the second label has now changed to use the script font.

Using Custom Fonts in SwiftUI

For your final label, which is a SwiftUI element, you’ll use a different font, which has the name Prata-Regular. As before, you’ll need a single source of truth for your SwiftUI fonts. For this, you’ll extend Font.

In the Extensions folder, open Font+CustomFont.swift and add the following inside the extension:

static func prataFont(size: CGFloat) -> Font {
  return .custom("Prata-Regular", size: size)
}

This returns a custom font of your specified size to use within SwiftUI elements.

Open BookTitleView.swift and replace .font(.system(size: 16)) with:

.font(.prataFont(size: 16))

Build and run.

You can see all three labels are now using custom fonts!

Now that you’ve learned how to use custom fonts in three different scenarios, it’s time to take things a little further and learn how you can get your fonts to scale automatically for users who request that.

Scaling Font Size Automatically With Dynamic Type

Since iOS 7, text-based UI elements have supported a feature called Dynamic Type. This allows users to specify their preferred text size on screen via Accessibility in the Settings app. This allows for greater readability, and supporting this within your app provides a more consistent reading experience across apps.

To support this in your app you make use of Text Styles. These tell the system how to scale your text relative to a specific style. There are many different text styles for different sizes.

Since all your labels represent book titles, you’ll go with the title1 style.