DEV Community

Leonard Sangoroh
Leonard Sangoroh

Posted on

Add a Custom Font to Your XCode Project

Typography is an important design element that, when used well, can positively impact how users perceive and interact with your application.
By the end of this post, you will have known or reminded yourself how to add a custom font to your XCode Project.

Steps involved in adding a custom font

  1. Choose and download your font
  2. Add the Font File to your project
  3. Using the Font in your application

Choose and download font
When choosing a font for your application design, you need to consider the factors such as the font's readability, its contrast, how well it can scale on different devices, and whether it matches your application's brand and color scheme.
After deciding the font, download its .tff files. One can get these files from Google Fonts. In this example, we will download 'Sedan SC' font.

  • Search for any font on the Search bar (circled in red)

  • Click on 'Get Font' either at the top or bottom right of you browser window (circled in green)

  • Click on 'Download all'. Note that you can download multiple fonts at once by clicking this button

Image description

Add the Font File to Project
Once you have downloaded the folder, unzip it to get the .tff file(s).
Add them to the project by dragging and dropping them to your open project. Make sure to check the 'add to targets' check box as shown below.
Image description

Add the font file to the Info.plist under the key 'Fonts provided by application' (or UIAppFonts if the Xcode version is different). You will achieve this by clicking the '+' sign on the 'Fonts provided by application' row then paste the font name (including its extension).
The info.plist file should look like this after adding the font to it.

Image description

Using the Font in Your Application
Below is a code block that shows the use of the imported font to configure the text of a button

    func configureCallToActionButton() {
        view.addSubview(callToActionButton)
        callToActionButton.addTarget(self, action: #selector(openTestamentsVC), for: .touchUpInside)
        callToActionButton.backgroundColor = UIColor(named: "accent-blue")
        callToActionButton.setTitle("Som Muma →", for: .normal)
        callToActionButton.layer.cornerRadius = 10
        callToActionButton.setTitleColor(UIColor(named: "text-black"), for: .normal)
        callToActionButton.titleLabel?.font = UIFont(name: "SedanSC-Regular", size: 30)


        callToActionButton.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            callToActionButton.topAnchor.constraint(equalTo: logoImageView.bottomAnchor, constant: 5),
            callToActionButton.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 50),
            callToActionButton.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -50),
            callToActionButton.heightAnchor.constraint(equalToConstant: 75)
        ])
    }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)