Custom Fonts in Interface Builder Tutorial in iOS8 with Swift

In the past it was possible to add custom fonts to Xcode, which could be displayed. However, it wasn't possible to view the custom font inside Interface Builder. In Xcode 6 it is possible to show the custom font inside the Storyboard. This tutorial will display two Text Views with a custom font, one generated in code, and the other purely in Interface Builder. This tutorial is build in iOS 8.1 with Xcode 6.1

Open Xcode and create a new Single View Application. For product name, use IOS8SwiftCustomFontTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices.

Download the custom font and drag it to the project. Make sure the "Copy items if needed" checkbox is selected.

Go to the Storyboard and drag two Text Views from the Object Library to the main View. Place one Text View on the top of the main view and the other one at the bottom. The Storyboard should look like this.

Select both Text Views by holding the Ctrl-key  and select the "Resolve Auto Layout Issues" button at the bottom-right(3rd button) and select Add Missing Constraints.

Select the Assistant Editor and make sure the ViewController.swift is visible. Ctrl and drag from the top Text View to the ViewController class  and create the following Outlet.

The font name is predefined by the font's creator and isn't always the same as the filename. Go to the ViewController.swift file and add the following code at the end of viewDidLoad.

let fontFamilyNames = UIFont.familyNames()
    for familyName in fontFamilyNames {
      println("Font Family Name = [\(familyName)]")
      let names = UIFont.fontNamesForFamilyName(familyName as String)
      println("Font Names = [\(names)]")

This will display all available fonts on the system, Build and Run the project, you will see the following font displayed in the console:

Font Family Name = [orange juice]
Font Names = [[orangejuice]]

So the Font Name of our Custom Font is orangejuice. Add the following line to the viewDidLoad method.

topTextView.font = UIFont(name: "orangejuice", size: 20.0)

Go to the Storyboard and select the bottom Text View. Go to the Attribute Inspector and in The Text View Section change the Font field to the following settings.

When the Done button is pressed the Font of the bottom Text View is altered. Now Build and Run the project, the two Text Views are displayed with the custom font.

You can download the source code of the IOS8SwiftCustomFontTutorial at the ioscreator repository on Github.