Level-Up your SwiftUI App with Custom Fonts

Tutorial — How to add a custom Font in SwiftUI

Hey everyone, my name is Izzy and in this short article I want to show you how you can add a new font to your SwiftUI project. The default font for XCode projects is easy to read and generally good for a lot of use cases, but sometimes it is nice to add another font for a little bit more detail.

Prerequisites

• Mac with Xcode 13+ installed
• Experience in Swift programming is not necessary but can make your life easier

Create a New Project

Open up Xcode and create a new App project or use an existing one. If you are new to Xcode and app development you can follow the detailed steps I made in one of my other articles, like “Creating an Image Card in SwiftUI”. This article also contains a small section about the interface of Xcode to get you started.

Find and Install a new Font

Google Fonts

There are a lot of different places were you can find all different sorts of fonts. Some of those are for free, others you will have to pay for; in either case make sure to check the license agreements if you are allowed to use the font especially if you are planning on selling your app.

One really great place I like to use for fonts is Google Fonts. The page has all different kind of fonts, and it’s very easy to find the right one.

Google Fonts Home Page

Once you select a font you get to a more detailed view, where you can check the license, see more examples of the font and of course also download the font itself. For this example I choose the Caveat Font from Google Fonts. Quickly checking the License part shows that we are allowed to use the font for any kind of project, so let’s go ahead and click “Download family” at the top right corner.

Always check the About & License page

Extract the Font and Install it

Once you download the font it will be download as an zip archive. Double-Click the zip and it will be automatically uncompressed and you will have a second folder with the same name. Depending on the font you downloaded the content of the folder might vary slightly but in general it should look similar to the image below:

Folder Structure of downloaded Font

In the main folder we have a Caveat.ttf file. This is our font file that we want to use. If you want a specific style only, like a very bold type of the font you can check the static folder.

Double-Click on the Caveat.ttf file which will open up the Font Book app and install the font for you on your mac. This will also make the font available in all other programs like pages or Affinity.

In the Font Book App you can check all your installed fonts in the “My Fonts” section on the left.

Font Book App with installed Fonts

Using a new Font in XCode

Adding the Font in XCode

First of we need to add the actual font file to our XCode project. To keep everything organized we are going to create a new folder just for our Font. This way you can just add more fonts and keep them all together.

Right-Click on your project folder and select “New Group”, and name it “Font”.

Creating a new Folder for Fonts

Then drag and drop the .ttf file into your newly created folder.

Adding a Font file to the Font folder

Updating the projects .plist

Before we can actually use the font we need to tell XCode and our app that we want to use and ship our app with a custom font. This is a simple entry in the Info.plist file. If you have been using XCode for a while you might notice that the file doesn’t seem to exist anymore, but it is actually just hidden since XCode 13.

To get it back, select your app on the left side and choose your app under “Targets”. Under “Info” you will see a list of settings for your app which is what was previously in the info.plist file. If you hover with your mouse over one of the entries and click the little “+” it will add a new row. Type “Fonts provided by Application” and press enter. This will add a custom property but also make .plist file appear in our project folder where we can see all our custom properties.

Adding “Fonts provided by Application”

Open up the Info.plist file and add your font to the list as type String. If you want to add multiple custom fonts to your project you can just click the “+” to add another entry underneath the “Fonts provided by application”.

Adding a custom Font to the Info.plist

Using the Font

Finally we can use our custom Font. Open up the ContentView or the view where you want to add your custom text and add a Text(). Then set the Font to Font.custom() where you can pass the name of your custom font.

The below code snippet shows an example of this which I used for this loading screen example.

Text("Loading...").font(Font.custom("Caveat", size: 72, relativeTo: .title))

Loading screen with custom font.

Thank you ❤️

Thank you for reading, I hope this was helpful! If you have any questions or suggestions, let me know in the comments.

And if you did enjoy this story please follow me for more stories! 😊