How to use the .monospaced system font design

Question

I am attempting to use a system font and apply the monospaced design, without luck. I can successfully make the text monospaced using the custom font function and passing in Courier and a size, but this is not idea because then the font size is fixed.

VStack {
    Text("lmlmlmlm 12345678")
    Text("lmlmlmlm 12345678")
    .font(Font.system(.body, design: .monospaced))
    Text("lmlmlmlm 12345678")
    .font(Font.custom("Courier", size: 18))
}

How do I get the system font to work with the .monospaced design? I think it might be a bug with .monospaced, because the .serif option does modify the text as expected.

Answer 1

It seems .monospaced font only applies when given a fixed size:

Text("monospaced")
  .font(.system(size: 14, design: .monospaced))

This won't work given a dynamic text style such as body. But as you've also mentioned it works fine for other fonts so this is probably a bug in Xcode 11.0 beta and hopefully will be fixed in next releases.

---

Update:

This issue was fixed with Xcode 11 beta 3. The following code works now:

Text("monospaced")
    .font(.system(.body, design: .monospaced))

Answer 2

In case you want to make only digits monospaced, you might try using something like this:

Text("0123456789")
    .font(Font.system(.body, design: .monospaced).monospacedDigit())

This does not circumvent the obvious bug of Xcode 11.0 beta, however. Letters are still not rendered monospaced.