Swift UI —Latest issues on custom Fonts
Don’t scratch your heads figuring out why your custom fonts aren’t working in the latest Swift UI project
After a long time, I am writing a medium story with the same old philosophy I followed when I started writing for Flutter — The altruism of selfless contribution.
If it took me a day to figure out something, it should not take anyone else to figure it out in a day. That piece of information should be available instantly & should not be a hurdle in someone’s learning/project/application/workplace.
The backstory
I have recently started learning iOS & Swift UI through some old courses and video lectures. Being a beginner in iOS and Swift, I was adding custom fonts as suggested by the video lectures & due to some reason I wasn’t able to get the custom fonts working. It took me a couple of hours juggling into some articles & stack overflow answers till I figured out what was I missing, so in this small article I am going to step by step show you how to add custom fonts in a Swift UI project (with that specific step that I was struggling with).
Adding custom fonts
Let’s see how can we add a custom .ttf file into a Swift UI project.
For the sake of example, we are using the Pacifico font file from Google Fonts official font list. Download & extract this file which should show something like this in its folder:
The second part is pretty obvious, you need to drag and drop this file into your project. Something like this:
You can create a new folder (called group in iOS terms) names fonts under your main folder or you can just drop the font directly, both things work fine.
After you drop it, you will see a dialog telling you to configure some project related things for this font file like this:
Make sure you check & select the check boxes & radios according to this screenshot. You need to check the target project in the list of targets (necessary). The remaining selections are already set by default.
Now, if you try to consume it right now it won’t work:
The trick part
This is where the tricky part comes in. Whenever custom fonts are added, you have to put in the “Fonts provided by Application” key in the info.plist file of your project
But wait, we don’t have this info.plist file in our project directory at all!
This is Swift UI’s new feature where Apple tells you that you don’t need the plist & entitlements files at all. So how do we add this “Fonts provided by Application” key to our plist file.
You can now do this by adding your keys under Targets — Info — Custom iOS Target Properties tab:
Click on that small plus button on the last property of the list and add a new property called “Fonts provided by Application” (it will autocomplete itself once you start typing)
This is an array of items by default. Add the exact file name of the font file against the first array item of this property & hit Enter:
The above trick was unveiled to me in this stack-overflow answer
As a final verification, just to be very sure, go and check the “Copy Bundle Resources” list to see if the font file is added there correctly (most likely it will be there, but just making sure is always better). You will find that under Targets — Build Phases — Copy Bundle Resources tab:
Voila!
It’s done! You can go and check your font code, and now it should work as expected:
I hope that helps people who are about to integrate custom fonts into their Swift UI projects. Suggestions & feedback is always appreciated.
Cheers!