Use Custom Fonts in SwiftUI

Written by Team Kodeco

Custom fonts can add a unique touch to your app’s design and help establish a brand identity. In SwiftUI, it’s easy to use custom fonts once you’ve added them to your project.

Add Custom Fonts to SwiftUI

To add a custom font to your SwiftUI project:

1. Download and unzip the font files. Remember to carefully read the font’s license if you plan to share or sell your app. The examples here use Lobster, available from Google Fonts.

   

2. Drag the font files into Xcode’s project navigator. It’s fine to drag a whole folder of TrueType (.ttf) or OpenType (.otf) files at once. Accept the default settings; you do want to copy items, create groups and add to the current target. You can check whether a font file was correctly added to the current target by selecting the font file in the project navigator, then opening Xcode’s File Inspector pane with Command-Option-1. Highlight each font file in the project navigator and ensure its Target Membership shows your app’s target.
3. The final step is adding a Fonts provided by application key to Info.plist and setting its value to your newly added fonts. To do this, select your project at the top of the Project Navigator, then select your target and choose the Info tab. To add the new key, select any row in Custom iOS Target Properties, right click and choose Add row. Scroll to Fonts provided by application, then click the disclosure triangle to expand the row and enter the path to where the custom font file lives in your project. Note that this creates an Info.plist file in your project if one did not already exist.

   

Once custom fonts are installed, they’ll be available throughout your app.

Note: If you’ve carefully followed these steps and your custom font still does not display as expected, use the Font Book app to make sure the font’s Format is True Type or OpenType True Type. PostScript fonts do not appear to be supported.

Apply Custom Fonts in SwiftUI

Now that you’ve installed a custom font, it’s easy to apply to Text views throughout your project. Just use the font modifier with a Font.custom argument and specify the name of your custom font, like so:

struct ContentView: View {
  var body: some View {
    Text("Rock Lobster")
      .font(.custom("Lobster-Regular",size: 36))
  }
}

The preview should look as follows:

In this example, you use the .custom argument of the font modifier, specifying the name and size of your custom font. Note that size is required and the name should match the name of the font file shown in the Identity inspector.

Using custom fonts in your SwiftUI app can enhance its overall look and style. With the .custom method, it’s easy to create and apply custom fonts to your Text views.