font-custom.md

Adding a custom font

Design inspired by my son who attended his first App design workshop today 09/23/23. He specifically called out needing a pixelated font 😊.

try? it out

//
//  ContentView.swift
//  SwiftUIPlayground
//
//  Created by Alex Paul
//

import SwiftUI

struct ContentView: View {
    let customFont = "Typeface-Mario-World-Pixel-Filled"

    var body: some View {
        VStack {
            Text("Mayhem")
                .font(Font.custom(customFont, size: 64))
            Text("Sandbox")
                .font(Font.custom(customFont, size: 24))
            Button(action: {}) {
                Text("Play")
                    .font(Font.custom(customFont, size: 18))
                    .padding()
                    .foregroundColor(.white)
            }
            .background(
                RoundedRectangle(cornerRadius: 20)
            )
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Resources

• Apple documentation: Applying custom fonts to text
• Code with Chris: SwiftUI: How to add custom fonts to your app
• Font Space