Custom Fonts

Using Custom Fonts

ComponentsKit supports the use of custom fonts throughout your app via the theming system. This guide walks you through the process of integrating a Google Font — Space Grotesk — into your iOS project and applying it using the library.

1. Add Font Files to Your Project

1. Download the desired font files from Google Fonts.
2. Unzip the download and choose the font weights you want (e.g., SpaceGrotesk-Regular.ttf).
3. Drag and drop the .ttf files into your Xcode project.
4. Ensure “Copy items if needed” is checked and the files are added to the appropriate target.

2. Register the Font in Your App

To let iOS know about your custom fonts, you need to register them using the UIAppFonts key. This allows the system to load them at runtime.

Option 1: Using Info.plist

If your project still includes a visible Info.plist file:

1. Open Info.plist.
2. Add a new key: Fonts provided by application.
3. Add the exact filenames of the fonts you imported (e.g., SpaceGrotesk-Regular.ttf).

<key>UIAppFonts</key>
<array>
  <string>SpaceGrotesk-Regular.ttf</string>
</array>

Option 2: Using Xcode Project Settings

In recent versions of Xcode, you can register fonts via the project settings:

1. Open your project in Xcode.
2. Select your app target.
3. Go to the Info tab.
4. Click the “+” button under Custom iOS Target Properties.
5. Add a new key: Fonts provided by application.
6. Add each font filename (e.g., SpaceGrotesk-Regular.ttf) as an item.

3. Apply the Font via Theme

Once registered, you can apply the custom font globally by updating the current theme. Here's how to set Space Grotesk as the medium-weight body font:

Theme.current.update {
  $0.layout.typography.body.medium = .custom(
    name: "SpaceGrotesk-Regular",
    size: 16
  )
}

4. Usage

Once the theme is updated, the font will be applied automatically across all components that use the body.medium typography — including all ComponentsKit elements.

UIKit

label.font = UniversalFont.mdBody.uiFont

SwiftUI

Text("Welcome to the App")
  .font(UniversalFont.mdBody.font)

Troubleshooting Tips

• If your font doesn’t appear:

  • Make sure the font file is included in the correct build target.
  • Ensure the filename is correctly listed in your Info.plist or project settings.
  • Verify the correct PostScript name is used when setting the font.

• To debug available fonts, print them at runtime:

UIFont.familyNames.forEach { family in
  print("Family: \(family)")
  UIFont.fontNames(forFamilyName: family).forEach { print(" - \( $0 )") }
}

Extending UniversalFont

If you need a font size or style that isn’t built into the library, you can extend UniversalFont to define your own custom text styles.

Here's how to create reusable font extensions:

extension UniversalFont {
  static func spaceGrotesk(size: CGFloat, weight: Weight) -> Self {
    switch weight {
    case .bold:
      return .custom(
        name: "SpaceGrotesk-Bold",
        size: size
      )
    case .semibold:
      return .custom(
        name: "SpaceGrotesk-Semibold",
        size: size
      )
    case .medium:
      return .custom(
        name: "SpaceGrotesk-Medium",
        size: size
      )
    default:
      return .custom(
        name: "SpaceGrotesk-Regular",
        size: size
      )
    }
  }

  static var xsHeadline: Self {
    .spaceGrotesk(size: 14, weight: .bold)
  }
}

You can then use these just like any other UniversalFont:

UIKit

label.font = UniversalFont.xsHeadline.uiFont

SwiftUI

Text("Welcome")
  .font(UniversalFont.xsHeadline.font)