Custom Fonts: Getting Started

So you’ve built a cool app. Nice one! However, it’s feeling a bit bland and boring. Your app needs a personality, and you want to make it look like a million dollars. Unfortunately, you don’t actually have a million dollars to spend on a branding expert. Fortunately, one way to instantly improve your app and make it look a million dollars is by using a custom font.

Not only does iOS fully support using custom fonts in your apps, but there are thousands of free fonts readily available online to use commercially.

In this tutorial, you’ll get a feel for using custom fonts within your own apps by improving a simple reading list app. Along the way, you’ll learn:

• A brief history of fonts and why you might choose one over another.
• How to install a custom font in your project.
• How to use a custom font with SwiftUI, Storyboards and programmatically with UIKit.
• What Dynamic Type is, and why it’s used.
• How to support Dynamic Type in your app.

Getting Started

Download the starter project by clicking the Download Materials button at the top or bottom of the tutorial. Then, open ReadingList.xcodeproj from the starter folder and build and run the app.

You’ll see a list of titles of three excellent beginner books from raywenderlich.com:

The font used here is nothing special; it’s the system font provided by iOS. With the help of some custom fonts, you’ll jazz this app up a bit!

Going Back to the Future

You might have heard the words font and typeface thrown around, but what exactly is the difference? Strictly speaking, a typeface is a set of letters that share a common design — for example, the typeface Arial. Meanwhile, a font is a particular set of those letters within a typeface — for example, size 10px Arial or size 16px Arial Bold. These are different fonts, but they share the same typeface. Makes sense, right? Nowadays, font and typeface are often used interchangeably, so you’ll often see one used when the other is more strictly correct.

Before choosing fonts to use in your app, it’s good to understand how technology has progressed to the fonts in use today. In fact, Steve Jobs said that the only reason the Mac supported multiple typefaces was because he had studied the history of typefaces and realized the importance of them.

So, going back in time…

Before the mid-15th century, everyone used to write by hand. Then, a guy named Johannes Gutenberg realized that this was extremely slow and expensive, so he created the printing press. This had reusable and moveable letter blocks. The font used was in the style of the Blackletter calligraphy typeface used in manuscripts, which looked a bit like this:

The font letters took up a considerable amount of room on the page, and through the centuries, this rather cumbersome font was eventually ditched for more efficient and smaller fonts. Different styles flourished and, fast-forwarding into the 20th century, they moved from the printing press into the digital era.

In the late 1980s, Apple developed the TrueType font standard, which allowed computer displays and printers to use one font file and provided a wide range of options to the font developer. Then, Microsoft developed the OpenType font standard, which superseded TrueType to allow cross-platform font files and more advanced typographic behavior.

In 2016, OpenType adopted support for variable fonts, which allow for a variety of widths, thickness, shape and slant, all in one font file. Despite this, most platforms now support both TrueType and OpenType fonts, so you’ll still see TrueType fonts used a lot.

On iOS, Apple provides a typeface with varying styles called San Francisco (SF). SF Pro is the default system font that any UI element will automatically use when you add it to your interface.

Choosing a Font

SF Pro falls under the category of a sans-serif type. This is one of five basic classifications of typefaces:

• Serif: These typefaces have a slight projection, called a serif, that finishes off a stroke of a letter. They’re typically used in title text to give a classic or more elegant look. An example of these typefaces is Garamond. The text you’re currently reading is also rendered in a serif font.
• Sans-serif: These are typefaces that, as you might have guessed (if you know French!), don’t have serifs. These are widely used in body text due to having a cleaner, more legible appearance than serif types. An example of these typefaces is Arial.
• Script or Handwriting: These look like handwriting and contain flourishes and loops. They’re useful in both formal and casual settings. An example of these typefaces is Zapfino.
• Monospaced: All the letters in these typefaces occupy an equal amount of horizontal space. These were common in typewriters and computers in the past. They’re rarely used in body text, but they’re usually used in scripts for the television or stage. An example of these typefaces is Courier New. You’ll also typically use one of these in your terminal application.
• Display: These vary in appearance, and they’re often eccentric and less restrained than the other categories. Their main purpose is for large headings and titles rather than body text. An example of these typefaces is Monoton.

As you can see, when it comes to typefaces, there many different types (no pun intended). A simple internet search will show you many font directories where you can find free fonts to download. However, you have to be careful, as they’re not always commercially available or don’t come with the right license. A reliable source for fonts is Google Fonts. A good rule of thumb for choosing a high-quality font is to rely on typefaces that have a lot of different weights.

Take a quick look at some fonts. Head over to https://fonts.google.com. Then choose Sans Serif as the Category. Filter by Number of styles and set it to 10+:

Take a look at the available fonts and familiarize yourself with Google Fonts.