# SwiftUI: How to Add Custom Fonts to Your App
Integrating custom fonts into your SwiftUI app can significantly enhance its visual appeal and user experience. This guide will walk you through the steps to add custom fonts to your SwiftUI application.
## **Setting Up Your Project**
To begin, you need the font files you wish to use. These files are typically in `.ttf` (TrueType Font) or `.otf` (OpenType Font) formats. You can find a variety of fonts on sites like [Google Fonts](https://fonts.google.com/), which offers an extensive collection of open-source fonts.
Google Fonts
### **Adding Font Files to Your Project**
1. **Download Your Font**: Choose and download the font you want to use. Ensure the font is in either `.ttf` or `.otf` format.
2. **Drag and Drop**: Drag the downloaded font files into your Xcode project. It’s good practice to create a new group (e.g., `Fonts`) to keep your files organized.
3. **Copy Items if Needed**: When you drag the files into Xcode, ensure that "Copy items if needed" is checked and that the files are added to your app’s target.
Copy Items if Needed
### **Verifying Font Files in Xcode**
To ensure your fonts are correctly added, follow these steps:
1. Go to your project’s settings.
2. Navigate to the `Build Phases` tab.
3. Under `Copy Bundle Resources`, confirm that your font files are listed.
Copy Bundle Resources
### **Updating the Info.plist File**
To make the fonts available to your app, you need to update the `Info.plist` file:
1. Go to your project’s settings.
2. Navigate to the `Info` tab.
3. Add a new key: `Fonts provided by application`.
4. Add each font file, ensuring you include the correct file name and extension.
Updating The Info.plist
## **Using Custom Fonts in SwiftUI**
With your fonts added and configured, you can now use them in your SwiftUI views. The basic way to display text in SwiftUI is with the `Text` view. To use a custom font, use the `.font` modifier with the `.custom` method.
```swift
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Text("Hello, SwiftUI!")
.font(.custom("MontserratRoman-Bold", size: 48))
.foregroundStyle(.orange)
Text("Custom Fonts are Great!")
.font(.custom("Montserrat-Thin", size: 25))
}
}
}
#Preview {
ContentView()
}
```
Replace `"Montserrat"` with the exact names of your font files (excluding the file extension).
## **Handling Font Failures**
It's important to provide a fallback font in case your custom font fails to load. You can do this by using the `.font` modifier conditionally:
```swift
Text("Hello, SwiftUI!")
.font(Font.custom("MyCustomFont-Regular", size: 24) ?? .system(size: 24))
```
## **Finding the Correct Font Name**
Sometimes, determining the exact name of a font can be tricky. You can list all available fonts in your app to find the correct font name. Add the following code in your app’s initialization:
```swift
init() {
for family in UIFont.familyNames {
print(family)
for names in UIFont.fontNames(forFamilyName: family) {
print("== \(names)")
}
}
}
```
Running this code will print a list of all font families and their respective font names, helping you identify the correct name to use.
Finding the Correct Font Name
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://ivansaul.gitbook.io/swiftui-cookbook/swiftui/continued-learning/swiftui-how-to-add-custom-fonts-to-your-app.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.