how to make custom font to align in center of the frame

Question

Created Mar ’23

Replies 2

Boosts 0

Participants 3

I need to use custom font in my app. While the built-in standard font will align in center automatically, the custom font seems to align "top"(seeing red border part) instead of "center"(blue border part). Is there any approach to fix it?

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20){
            Text("SEPTEMBER")
                .font(.largeTitle)
                .border(.blue)
            
            Text("SEPTEMBER")
                .font(Font.custom("Arial Hebrew", size: 20))
                .border(.red)
        }
    }
}

Boost

Answer 1

codeandcook OP

Mar ’23

seems to be a font characteristic, I apply a padding to it:

struct ContentView: View {
  @ScaledMetric(relativeTo: .largeTitle) var scaledPadding: CGFloat = 7
    var body: some View {
        VStack(spacing: 20){
            Text("SEPTEMBER")
                .font(.largeTitle)
                .border(.blue)
            Text("SEPTEMBER")
                .font(.custom("Founders Grotesk Light", size: 30))
                .border(.orange)
            Text("SEPTEMBER")
                .font(.custom("Arial Hebrew", size: 20, relativeTo: .largeTitle))
                .padding(scaledPadding)
                .border(.red)
        }
    }
}

1

Answer 2

anukrishna OP

Mar ’23

Yes, there is an approach to align custom fonts to the center in SwiftUI. You can use the .baselineOffset modifier to adjust the vertical alignment of the custom font. Here's an updated version of your code that centers the custom font:

`struct ContentView: View {
    var body: some View {
        VStack(spacing: 20){
            Text("SEPTEMBER")
                .font(.largeTitle)
                .border(.blue)
            
            Text("SEPTEMBER")
                .font(Font.custom("Arial Hebrew", size: 20))
                .baselineOffset(-0.25 * UIFont.preferredFont(forTextStyle: .body).lineHeight)
                .border(.red)
        }
    }
}`

In this code, we're using the .baselineOffset modifier to move the baseline of the custom font down by a fraction of its line height. The specific value we're using (-0.25) is just a suggestion; you may need to adjust it to get the exact center alignment you want. Note that we're also using UIFont.preferredFont(forTextStyle: .body).lineHeight to get the line height of the system font at the .body text style. This ensures that the offset will be proportional to the font size, and will work correctly on devices with different screen densities.

1