SwiftUI .font()

The .font() modifier applies a specified font to text in a view.

Syntax

Text("This text will have the font below applied to it.")
    .font(.fontName)

The .fontName passed as an argument to the .font() modifier is applied to all text within the text view. There are a selection of standard fonts available. It’s also possible to create system fonts and add in custom fonts.

Here are some standard fonts:

• .largeTitle applies a large title style.
• .title applies a title style.
• .title2 a smaller title font style.
• .title3 the smallest title font style.
• .headline applies a headline style.
• .body applies a body text style.
• .caption applies a caption style.
• .footnote applies a footnote style.

The weight of a font can be edited using the .fontWeight() modifier.

Example

The following example shows a VStack containing texts with different fonts applied using the .font() modifier:

import SwiftUI

struct FontView: View {
    var body: some View {
        VStack {
            Text("This is a Large Title")
                .font(.largeTitle)
            Text("A Title Looks Like This")
                .font(.title)
            Text("Headline text will look like this!")
                .font(.headline)
            Text("This is how body text appears.")
                .font(.body)
            Text("Some text with no font applied.")
            Text("Footnote text is quite small.")
            .font(.footnote)
            Text("Some text using a created system serif font.")
                .font(.system(.title, design: .serif, weight: .semibold))
            Text("Some text using a created system monospaced font.")
                .font(.system(.title2, design: .monospaced, weight: .bold))
        }.padding()
    }
}

Copy to clipboard
Copy to clipboard

In the above example, various standard fonts are applied to the first six text views. The last two text views have created system fonts applied to them.

This will display: