hi everyone! perhaps I haven't searched too well, ...

# multiplatform

[Marcelo Gobetti]

hi everyone! perhaps I haven't searched too well, but I was surprised I couldn't find any discussions regarding the font used by a KMP app on iOS

see in the attachments that the difference is noticeable when compared to the font used by a SwiftUI app. It feels as if KMP isn't using Apple's San Francisco font, but according to the code it does?

• is that just me, even though my KMP project was just generated using the wizard?
• or is that how you all see iOS apps built with KMP? (understandable if KMP's goal is to output very closely looking Android and iOS apps, and not necessarily to reflect intrinsic native differences)

[Marcelo Gobetti]

Compose

Column {
  Text(
    text = "The quick brown fox jumps over the lazy dog.",
    fontSize = 48.sp
  )
  Text(
    text = "1234567890",
    fontSize = 48.sp
  )
}

[Marcelo Gobetti]

SwiftUI

VStack(alignment: .leading, spacing: 0) {
  Text("The quick brown fox jumps over the lazy dog.")
      .font(.system(size: 48))
  Text("1234567890")
      .font(.system(size: 48))
  Spacer()
}

[Pablichjenkov]

Seems the same with a slightly difference in the font weight. Can you try different font weights in compose

[Marcelo Gobetti]

the weight is indeed one of the differences my eye can tell, and even if I assume that the weight is also the entire reason why the colors slightly differ as well, there's still the letter spacing that to my eyes is the most striking difference; and a lot more subtly, something in the glyphs format as well. Here are side-by-side comparisons of specific glyphs that my eyes can tell apart

[Pablichjenkov]

I see, great observation btw.

[Marcelo Gobetti]

that Compose code run on Android overall looks closer to Compose iOS than to SwiftUI iOS. The first impression is that they're identical, but a closer look reveals subtle differences again.

So Compose iOS may be using a different font than Compose Android, but perhaps there are still hardcoded kerning, letter-spacing, perhaps other things that don't match the native iOS rendering?

[Jan Holešovský]

According to https://www.infoq.com/news/2023/05/compose-multiplatform-ios-alpha/ : "On iOS, Compose Multiplatform uses canvas-based rendering, using the Skiko graphics library. Also known as Skia for Kotlin, Skiko is based on Skia, Google's graphics library used for Chrome, ChromeOS, and Flutter." So I guess it is not surprising that the rendering might look a bit different than native SwiftUI, while it is close to what you can see on Android...

[Konstantin Tskhovrebov]

Fonts are the same but the rendering is slightly different.
Check this repo: https://github.com/terrakok/ComposeIosFontsTest/tree/master

[Konstantin Tskhovrebov]

https://kotlinlang.slack.com/archives/C0346LWVBJ4/p1702549860459719

[Marcelo Gobetti]

thank you @Jan Holešovský and @Konstantin Tskhovrebov! joining #compose-ios now - I had only searched on #ios and #multiplatform