Adding Swift Font to your SwiftUI app

·

4 min read

Adding custom fonts to your Xcode project involves adding font files to your project and declaring them in your app's Info.plist. The following steps detail the procedure:

  1. Add Font Files to Your Project Drag and drop your .ttf or .otf font files into your project in Xcode. Make sure to tick the target in the "Add to targets" field in the dialog that appears.

  2. Declare Fonts in Your Info.plist Open your Info.plist file and add a new key called Fonts provided by application. This key is an array that needs to contain String items, each representing the full filename of a font.

For instance, if you've added FontAwesome.otf, then an entry in your Fonts provided by application array would be FontAwesome.otf.

Here's an example of an Info.plist entry:

<key>UIAppFonts</key>
<array>
  <string>FontAwesome.otf</string>
  <string>MyCustomFont.ttf</string>
</array>

3. Use Your Fonts: You can use your custom fonts in your SwiftUI views. You access them by their PostScript name. You can use macOS's Font Book to find this name (it may not match the filename). Here's an example of using a custom font in SwiftUI:

Text("Hello, HelloWorld!")
    .font(.custom("FontAwesome", size: 36))

4. Customize your Fonts with SwiftUI Font and Swift Font

import SwiftUI

public extension Font {
    static let title2Font: Font = .title2
    static let titleFont: Font = .title

    // Poppins Regular
    static let poppins14 = Font.congleSolutionXFont(fontName: "Poppins", style: .footnote, weight: .regular)
    static let poppins16 = Font.congleSolutionXFont(fontName: "Poppins", style: .callout, weight: .regular)

    // Poppins SemiBold
    static let poppinsSemiBold12 = Font.congleSolutionXFont(fontName: "Poppins", style: .caption, weight: .semiBold)
    static let poppinsSemiBold14 = Font.congleSolutionXFont(fontName: "Poppins", style: .footnote, weight: .semiBold)
    static let poppinsSemiBold16 = Font.congleSolutionXFont(fontName: "Poppins", style: .callout, weight: .semiBold)

    // Poppins Bold
    static let poppinsBold16 = Font.congleSolutionXFont(fontName: "Poppins", style: .callout, weight: .bold)
    static let poppinsBold30 = Font.congleSolutionXFont(fontName: "Poppins", style: .title, weight: .bold)
    static let poppinsBold36 = Font.congleSolutionXFont(fontName: "Poppins", style: .largeTitle, weight: .bold)

    // Create a custom font with the given fontName, style, and size that builds on top of the SwiftUI
    // Font.custom function
    static func congleSolutionXFont(fontName: String, style: Font.TextStyle, weight: CongLeSolutionXFont.Weight) -> Font {
        return Font.custom("Poppins-\(weight.rawValue)", size: CongLeSolutionXFont.size(for: style), relativeTo: style)
    }
}

public enum CongLeSolutionXFont {
    public enum FontName: String {
        case poppins = "Poppins"
    }

    public enum Weight: String {
        case regular = "Regular"
        case semiBold = "SemiBold"
        case bold = "Bold"
    }

    // Creates a CGFloat size matching a TextStyle
    // This is mostly for use in Font.custom(name:size:relativeTo)
    static func size(for style: Font.TextStyle) -> CGFloat {
        switch style {
        case .largeTitle:
            return 36
        case .title, .title2, .title3:
            return 30
        case .callout:
            return 16
        case .footnote:
            return 14
        default:
            return 17
        }
    }
}

This Swift code imports SwiftUI and defines a public extension for the SwiftUI's Font class and a CongLeSolutionXFont public enum.

In the Font extension, several static computed properties are added to create custom fonts:

  • title2Font and titleFont are simply predefined SwiftUI font styles.

  • poppins14, poppins16, poppinsSemiBold12, poppinsSemiBold14, poppinsSemiBold16, poppinsBold16, poppinsBold30, poppinsBold36 are static properties defining different sizes and styles for the Poppins font. These styles are created by invoking a static helper function congleSolutionXFont(fontName:style:weight:).

The congleSolutionXFont(fontName:style:weight:) function creates a custom font instance of SwiftUI.Font with a given font name, style, and weight.

In this function, Font.custom is used, which is a SwiftUI built-in function to create a custom font based on the provided name, size, and text style. This function uses match-cased string interpolation to compose the correct font name for the requested weight (regular, semiBold, or bold).

In the public enum CongleSolutionXFont, there are two other enums: FontName and Weight. Here FontName represents the name of the font and Weight represents the font weight or thickness of the characters in a font.

The function size(for:) inside CongleSolutionXFont is used to map Font.TextStyle to their respective sizes. It is done by a switch statement that works by matching the input style to its corresponding size. For some font sizes, it's falling through multiple cases, for instance, .title, .title2, and .title3 share the same font size of 30.

Overall, this code primarily defines and creates custom font styles based on your needs by directly extending SwiftUI's Font and utilizing a helper Enum. This way, any font style or size change will only need modifications in one place and can be applied throughout the codebase.

5. Troubleshooting: If the custom font does not display correctly:

  • Make sure your font's filename is entered correctly into Info.plist

  • Check that you're accessing your font by its PostScript name and it matches exactly (including capitalization).

  • Ensure your font is included in your app target. Check the "Target Membership" in the right sidebar when selecting the font file.

6. Considerations: Remember that using custom fonts increases your app size and may raise copyright issues if the font isn't licensed for distribution.

With these steps, you should be able to add custom fonts to your Xcode project and use them in your SwiftUI views.