The text is shown differently by OS

Lottie in Mobile
1

Hi, does anyone know how to fix this? The number in the circle looks different even though it’s same Json. The problem is that it shows a different font in the iOS Lottie player compared to the original and the second Android image. How can the number shown in the iOS Lottie player is looked the same as others? Additional info. I used the slider control but the number wasn’t possibly increased when it’s shown in the Json player. So I removed the slider control effect then I just type a text for each frame. (수정됨)
Different

2

Make sure you have it export all assets, because type can change.

1 Like
3

It seems that iOS currently does not support custom glyphs, but only iOS system fonts.
You can use var fontProvider: AnimationFontProvider property of AnimationView instead.

1 Like
4

This is most common issue when texts is used in json,
you can simply right click on text layer → Create → Create shapes from text.
and then you are done.

2 Likes
5

Hey @koden.u8800 , can you add a sample code? I’m trying for days to change this animation font (or get the actual font). I opened a GitHub issue: Animation font doesn't match Lottie preview · Issue #1546 · airbnb/lottie-ios · GitHub.

Any help will be highly appreciated.

1 Like
6

Just add custom font to project: Adding a Custom Font to Your App. Your animation uses “Druk-WideSuper” font.
If you want to replace font with other (for example “Zapfino”) use this code:

struct FontProvider: AnimationFontProvider {
    func fontFor(family: String, size: CGFloat) -> CTFont? {
        CTFontCreateWithName("Zapfino" as CFString, size, nil)
    }
}
animationView.fontProvider = FontProvider()
1 Like