By default, Text layers in Judo use Apple’s System Font, San Francisco. You can change the Font Family, Style, and Design of your Text layers by applying the Font modifier.

The Font modifier comes with 3 customizable parameters:

Before you learn how to add a Custom Font to your Judo file, let’s take a look at this Judo file to see how you can customize the System Font.

In the starter file, you’ll find 3 Text layers in the Artboard. Although all three Text layers use the default System Font family, each one has a unique look.

Text layers with the System Font family can be customized by configuring the Font modifier’s Style and Design parameters, and by applying other modifiers, too, such as Text Case and Kerning.

Here’s how we configured each Text layer:

Since we haven’t added a Custom Font Family to the file yet, the only Font Family that’s used is the System Font. Let’s add a Custom Font Family to our project.

To add a custom Font Family to your Judo design, start by navigating to the menu bar to open the Text menu and then click on Custom Fonts… From the Custom Font Manager, click on Add in the bottom left corner and then choose a Font name from the drop down list.

To proceed, you’ll need to confirm that you have a valid license to use the Font.

Let’s add the Font Copperplate and then click on Done to exit the Custom Font Manager.

Now, let’s update the Font modifier parameters for the ‘Mix’ Text layer.

The Font modifier applied to the ‘Mix’ Text layer is currently set to the ‘System Font’ Family, ‘Callout’ Style, and a ‘Default’ Design. It also has the Text Case modifier, which sets the text to uppercase, and the Kerning modifier, to set the spacing between each character to 13 points.

Now that we’ve added a custom Font Family, let’s change the Family parameter in the Font modifier to Copperplate. Since the Design parameter is only used to configure the System Font Family, it is no longer visible in the Inspector panel.

When you change the Font Family of a Text layer, the previously configured parameters go back to their default values. In this example, the Style changes from Callout to Body. Let’s set the Style to Large Title instead.

The Large Title Style could be bigger, so let’s change its point size.

When you add a Custom Font, Judo will automatically assign a size and weight (if the custom Font Family offers alternatives), ensuring that the layer will render correctly on all device sizes.

You can edit each Style option by clicking on the gear icon right under it.

As you can see, each Style option has it’s own Font weight and Font size. Take, for example, the Large Title Style. You can change the weight from Regular to either Light or Bold, and you can adjust the Font size, too. Let’s leave the Font weight as is, but double the Large Title size to 68 points.

Since Font Styles support Apple's Dynamic Type system, your text will scale proportionally when users change the system text size or make accessibility adjustments.

We can see this in action by selecting the Artboard, opening the Preview Controls from the Inspector panel, clicking on the plus (+) icon in the Text Size section, and choosing different sizes from the drop down menu.

Let’s embed a few more Custom Fonts to this Judo file.

We can add as many Custom Fonts to our project as we’d like. Just as we did earlier, click on the Custom Fonts… option from the Text menu and then add the new Fonts from the drop down list. Let’s embed Snell Roundhand and Cochin.

With the ‘&’ Text layer selected, let’s update the Font modifier parameters from the Inspector panel. This time, let’s set the Family to Snell Roundhand and change the Style back to Large Title. Then, click on the gear icon to change the Font size to 160 points.

Now, let’s update the ‘Match’ Text layer by setting the Font modifier parameters to the following:

Once you’ve added a Font from your system to the Font Manager, the Font will be embedded within your Judo file. You can delete it from your project by selecting the Font Family in the Font Manager and then clicking on Remove.

Notice how when you delete the Font, it automatically gets removed from the canvas, reverting back to the System Default Family and with a Style set to Body.

Let’s open the Code Inspector to break down the SwiftUI code that Judo automatically generated.

#Preview("Artboard") defines a preview of a SwiftUI view with the title "Artboard", and it’s used to visualize SwiftUI views during development.

Text("Mix") is one of the Text layers that we had customized. It's been modified by the .font modifier, which we had set to a Custom Font Family: .custom("Copperplate", size: 68). It also sets the Text Case to .uppercase, and adjusts the Kerning (spacing between characters) to 13, which are the modifiers that had originally been applied to this Text layer.