Skip to main content

​
Overview

GlassText supports all SwiftUI font designs, allowing you to create glass morphism effects with different typographic styles. Choose from default, serif, monospaced, or rounded designs to match your app’s aesthetic.
Font designs are particularly effective when paired with the glass effect. Serif designs work well for elegant headers, while rounded designs create a friendly, modern feel.

​
Available font designs

GlassText supports four font design options:
  • Default - System default font
  • Serif - Serif font family for classic, elegant text
  • Monospaced - Monospaced font family for code or technical content
  • Rounded - Rounded font family for modern, friendly text

​
Basic example

GlassText("Default Design", glass: .regular)
    .fontDesign(.default)

​
Complete example

This example demonstrates all four font designs in a vertical stack: 
import SwiftUI
import GlassText

struct FontDesignsDemo: View {
    var body: some View {
        VStack(spacing: 20) {
            GlassText("Default Design", glass: .regular)
                .fontDesign(.default)
            
            GlassText("Serif Design", glass: .regular)
                .fontDesign(.serif)
            
            GlassText("Monospaced Design", glass: .regular)
                .fontDesign(.monospaced)
            
            GlassText("Rounded Design", glass: .regular)
                .fontDesign(.rounded)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(
            LinearGradient(
                gradient: Gradient(colors: [.blue, .purple]),
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
        )
    }
}

​
Using font designs with system fonts

You can combine font designs with custom sizes and weights: 
GlassText("Custom Glass Text", glass: .regular.tint(.cyan))
    .font(.system(size: 48, weight: .bold, design: .rounded))

​
Preview example

This example from the GlassText preview demonstrates font designs with consistent sizing: 
VStack(spacing: 15) {
    Text("Font Designs")
        .font(.headline)
        .padding(8)
        .glassEffect()

    GlassText("Default")
        .font(.system(size: 40))
        .fontDesign(.default)
    GlassText("Serif")
        .font(.system(size: 40))
        .fontDesign(.serif)
    GlassText("Monospaced")
        .font(.system(size: 40))
        .fontDesign(.monospaced)
    GlassText("Rounded")
        .font(.system(size: 40))
        .fontDesign(.rounded)
}

​
When to use each design

Use the default design for general-purpose text that matches the system font. Best for:
  • Standard UI elements
  • Body text with glass effects
  • Maintaining consistency with system design
Font designs work seamlessly with all glass effect variations including clear, regular, and tinted glass.

Build docs developers (and LLMs) love

Get started for freeTalk to us