SwiftUI Font tutorial

Learn how to use fonts in SwiftUI and customize Text view in SwiftUI with number of Font options such as design, size, weight, color and others.

SwiftUI lets you customize Text by applying a .font() modifier. The default iOS font is called San Francisco and if you don’t explicitly change it, then all of your text will have the default iOS look.

Use one of many standard fonts which are great to keep consistency with default iOS look:

Text("Simple Swift Guide").font(.largeTitle)

Some other options of standard fonts include: title, headline, subheadline, body, callout, caption or footnote.

Change font size of Text using default system font (San Francisco):

Text("Simple Swift Guide").font(.system(size: 56.0))

Change font weight:

Text("Simple Swift Guide").fontWeight(.light)

Change default system font size, weight and design at the same time:

Text("Simple Swift Guide").font(.system(size: 45, weight: .bold, design: .default))

Add bold and italic styling to default headline font:

Text("Simple Swift Guide").font(.headline).bold().italic()

Change font color using .foregroundColor() modifier:

Text("Simple Swift Guide").font(.callout).foregroundColor(.blue)

In a second, more advanced tutorial, we’re going to learn how to use custom font family in your iOS app.

I’m including a quick visual reference to standard fonts below:

Visual reference to standard iOS fonts using SwiftUI.
Visual reference to standard iOS fonts using SwiftUI.

Learn more about Fonts at Apple’s official documentation page.

Related tutorials:

Questions, comments or suggestions? Follow us on Twitter @theswiftguide