All Collections
Text
Other
▶️ Adding Custom Fonts
▶️ Adding Custom Fonts

How to embed Custom Fonts to your Judo file.

Updated over a week ago

Overview

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:

  • Family - Use the default System Font or any Custom Fonts that you add.

  • Style - Choose from a list of pre-defined Styles. Each Style has a specific Font weight and point size, and scales proportionally when a device’s text size or accessibility setting changes.

Note

If you choose the Custom Style option, you can set a specific point size and weight for your Text layer. However, it will not scale proportionally when a device’s text size or accessibility setting changes.

  • Design - When the Font Family is set to System Font, you can set the design to one of the following: Default, Monospaced, Rounded, Serif.

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.

🔻 Download the starter Judo file to follow along.

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:

  • Mix

    • Font - ‘System Font’ Family, ‘Callout’ Style, ‘Default’ Design

    • Text Case - Uppercase

    • Kerning - 13 points

  • &

    • Font - ‘System Font’ Family, ‘Large Title’ Style, ‘Rounded’ Design

  • Match

    • Font - ‘System Font’ Family, ‘Title’ Style, ‘Serif’ Design

    • Kerning - 14 points

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.

Embed a Custom Font Family

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.

Note

The Fonts listed in the Custom Font Manager are sourced from those installed on your Mac. Can't find the Font you need? Use Font Book to install new ones.

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

Apply a Custom Font Family

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.

Edit a Custom Font Family

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.

Preview a Custom Font in Different Text Sizes

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.

Embed Several Custom Fonts

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:

  • Family - Cochin

  • Style - Large Title

Delete Custom Fonts

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.


SwiftUI Code Breakdown

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

#Preview("Artboard") { 
HStack(spacing: 0) {
VStack(alignment: .leading) {
Text("Mix")
.font(.custom("Copperplate", size: 68))
.textCase(.uppercase) .kerning(13)
Text("Match")
.font(.custom("Cochin", size: 34))
.kerning(14)
}
Text("&")
.font(.custom("SnellRoundhand", size: 160))
}
}

#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.


Resources

🔻 Check out the finished Judo file!

Did this answer your question?