How To Add Font, FontWeight To Text In SwiftUI

Loading

How To Add Font, FontWeight To Text In SwiftUI

Introduction

This is the first article of our series where we will write some code. In this article, we will see how we can add Text to our app. If you have some basic knowledge of SwiftUI, you probably know how easy to add Text in SwiftUI. We will also learn how to change or modify Text, from plain Text to adding different Fonts, Colors, and other View modifiers. This article will be fundamental in SwiftUI, but I have to cover this because maybe some people do not have any prior knowledge of iOS development.

Let's get started with the code

How To Add Font, FontWeight To Text In SwiftUI

Creating a new SwiftUI file

We are here in the Xcode, where we have created a project in the last article. I am going to create all these course files in this project. So to create a new SwiftUI file, click on project navigation on the left. Now we will select the SwiftUI file. Here we will name this file TextLearnSwiftUI. You can give your own.

Navigating to our TextLearnSwiftUI file

How To Add Font, FontWeight To Text In SwiftUI

When we create a new SiwftUI file, it comes with some preloaded texts. We can also see that text in our canvas on the right side. Here we have a Text "Hello World" in our file and the same in the canvas screen. We have two methods to add this Text to the file. We can simply type Text with closed parentheses, or we can click plus icon on the top right navigator, search for Text, then double-click on Text.

Adding View modifiers to the Text

Changing the font for the Text

How To Add Font, FontWeight To Text In SwiftUI

The most common thing we always want to do with the text is to change the font because we now have just basic text on our screen. So click on the Text and the attribute inspector opens on the right side navigation. We can see some of the modifiers we can add to our Text. We can also type these directly into this text, but if you are a beginner, this is the right place to start. Here Xcode comes with some of the default fonts we can select. If we add these modifiers, then it will add to our code directly. We selected the font from the property inspector, and it was added to our code.

How To Add Font, FontWeight To Text In SwiftUI

import SwiftUI
struct TextLearnSwiftUI: View {
    var body: some View {
        Text("Hello, World!").font(.largeTitle)
    }
}
struct TextLearnSwiftUI_Previews: PreviewProvider {
    static
    var previews: some View {
        TextLearnSwiftUI()
    }
}

We can add any view modifiers by pressing the dot at the end of the component, which will show all the view modifiers for that component. We can select the fonts available for this Text, which will reflect on the canvas.

How To Add Font, FontWeight To Text In SwiftUI

I will add another modifier, FontWeight, by simply pressing the dot and searching for FontWeight. Here I have added Bold to this text. You can simply press the dot inside FontWeight, and it will show all the FontWeights. We can select Bold, Medium, Semibold, etc.

import SwiftUI
struct TextLearnSwiftUI: View {
    var body: some View {
        Text("Hello, World!").font(.largeTitle).fontWeight(.bold)
    }
}
struct TextLearnSwiftUI_Previews: PreviewProvider {
    static
    var previews: some View {
        TextLearnSwiftUI()
    }
}

In SwiftUI, we can set the font size for our Text using the .font modifier on a Text view. The .font modifier takes a Font value, which can be created using the Font struct.

Here's an example of setting the font size of a Text view to 24 points.

Text("Hello, World!")
    .font(Font.system(size: 24))

In this example, we're using the system font and setting its size to 24 points. You can also use custom fonts and specify their size in the same way:

Text("Hello, World!")
    .font(Font.custom("MyCustomFont", size: 24))

In this example, we're using a custom font named "MyCustomFont" and setting its size to 24 points.

You can adjust the font size per your requirement by changing the size value in the .font modifier. For example, if you want to set the font size to 36 points, you can do so by changing the size value like this:

Text("Hello, World!")
    .font(Font.system(size: 36))

Remember that the font size is relative to the device's screen resolution, so a font size that looks good on one device may not look as good on another device with a different screen resolution.

Conclusion

In this article, we have seen how we can add Text to our screens. We have also seen some Text modifiers. In a single article, it is impossible to cover whole Text modifiers, so in my next article, I will continue to this and see other modifiers for the Text component. I hope you enjoyed this article.

Thank you for reading!