Using Custom Fonts in SwiftUI

Hello, in my first Medium article, I will explain how to use custom fonts in SwiftUI. Let’s get started. First, we need to find the font used in our design. I will be using the “Poppins” font, which I found in Google Fonts with a quick Google search.

After downloading the font, we can begin the process within Xcode.

I have created a folder named ‘Resources’ in my Xcode project structure, where I add resources such as fonts and language files. Then, within this folder, I create a ‘Fonts’ directory and place the files from the downloaded zip folder into it.

After making these settings, you should be able to see all your fonts in the folder as shown below.

After completing this process, all of our fonts are now transferred into Xcode. However, this is not the end. To be able to use this font in our project, we need to write an extension. I create an ‘extensions’ folder under my ‘Utils’ folder and create a file named ‘Font+Extensions’ inside it.

//
//  Font+Extensions.swift
//
//  Created by Sinan Tanrıkut on 23.09.2023.
//

import SwiftUI

extension Font {
    static func setCustom(fontStyle: Font.TextStyle, fontWeight: Weight = .regular) -> Font {
//        return Font.custom(fontWeight.rawValue, size: fontStyle.size, relativeTo: .caption)
        if #available(iOS 16.0, *) {
            return Font.system(size: fontStyle.size, weight: fontWeight, design: .default)
        } else {
            // Fallback on earlier versions
            return Font.system(size: fontStyle.size, design: .default).weight(fontWeight)
        }
    }
}

extension UIFont {
    static func setCustom(fontStyle: Font.TextStyle, fontWeight: CustomFont) -> UIFont? {
        return UIFont(name: fontWeight.rawValue, size: fontStyle.size)
    }
    
    static func setSystem(fontStyle: Font.TextStyle, fontWeight: Weight) -> UIFont? {
        return systemFont(ofSize: fontStyle.size, weight: fontWeight)
    }
}

extension Font.TextStyle {
    var size: CGFloat {
        switch self {
        case .largeTitle: return 34
        case .title: return 28
        case .title2: return 22
        case .title3: return 20
        case .headline: return 18
        case .body: return 17
        case .callout: return 16
        case .subheadline: return 15
        case .footnote: return 13
        case .caption: return 12
        case .caption2: return 11
        @unknown default:
            return 8
        }
    }
}

enum CustomFont: String {
    case regular = "Poppins-Regular"
    case semibold = "Poppins-SemiBold"
    case medium = "Poppins-Medium"
    case bold = "Poppins-Bold"
    case extrabold = "Poppins-ExtraBold"
}

In the ‘CustomFont’ part here, we specify the font names according to the files we’ve uploaded. For ‘Regular,’ we use ‘Poppins-Regular,’ and we apply a similar process for the others. Once we have completed these steps, the final stage is to go to the ‘General Settings’ of our project.

Afterwards, navigate to the ‘Info’ section and click the ‘+’ icon to add the ‘Fonts provided by application’ key.

After adding it, click on the icon right next to the key to edit its contents. In this section, you need to define the fonts you want to use. I make additions in the ‘String’ section, right across from where it says ‘Item 0,’ like this: ‘Poppins-Regular.ttf’.

I have added two fonts here as an example to use them in our project

       Text("Login View")
                .font(.setCustom(fontStyle: .title2, fontWeight: .bold)

This is how we can use them.

In conclusion, we have successfully included the desired font in our project.