.font()

Anonymous contributor's avatar
Anonymous contributor
Published Mar 5, 2023Updated Oct 5, 2024
Contribute to Docs

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()
}
}

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:

SwiftUI ViewModifier .font()

All contributors

Contribute to Docs

Learn SwiftUI on Codecademy