Can't use custom base64 font in lottie animation loaded in Android Webview

[rajatsangrame]

In the HTML file, I have 2 elements, one is a sample text and the second is lottie-container. I am trying to load Poppins-Bold.otf as a base64 string and it works fine for the animation.

 function loadData(base64font, jsonData) {

            let url = "url(data:font/truetype;charset=utf-8;base64," + base64font + ") format('opentype')";
            console.log('url', typeof (url))
            let font = new FontFace('Poppins-Bold', url);
            font.load().then(function (loadedFace) {

                console.log('tag', document.fonts.check("14px Poppins-Bold")); //true
                console.log('tag', loadedFace.status); // loaded            
                document.fonts.add(loadedFace);
                loadAnimation(jsonData);
            }).catch(function (error) {
                console.log(error);
            });
}

  function changeText(text) {
            textData.f = 'Poppins-Bold';
            textData.t = 'Domestic LPG price hiked by Rs 50 per 14.2-kg cylinder, first hike since July 2022';
            animation.renderer.elements[0].updateDocumentData(textData, 0);
 }

But when I load the HTML inside an Android WebView, the sample text is updated with the new font but not working for Lottie Animation.

The console logs are also correct in android webview.

console.log('tag', document.fonts.check("14px Poppins-Bold")); //true
console.log('tag', loadedFace.status); // loaded          

[rajatsangrame]

@bodymovin @gpeal Can you please check this issue?

[gpeal]

I think you meant to post this on https://github.com/airbnb/lottie-web/

[rajatinrizzle]

@gpeal Didn't get you. this is posted in the https://github.com/airbnb/lottie-web/ issues only. This is related to android webview, that's why I mentioned you here.

[gpeal]

@rajatinrizzle Yes but if you're playing Lottie in a WebView then it's lottie-web.

[rajatsangrame]

@gpeal I think you still misunderstood, I am saying this issue is part of lottie-web only, not lottie-android

[gpeal]

@rajatinrizzle Ah yes. I don't normally get tagged here so I assumed this was lottie-android without looking.

[bodymovin]

Hi, unfortunately I don't have an easy way to test Android WebViews, have you tested directly providing the font to the animation instead of loading it afterwards to check if it works?
Another test would be to see if loading the font via css behaves differently.

[rajatsangrame]

@bodymovin

1. Let me provide you sample android project so you can easily test Android WebViews.
2. I didn't get how can I provide the font directly to the animation. If you meant "fPath": "https://fonts.googleapis.com/css2?family=Poppins" in the Lottie JSON it didn't work for me.
3. I have tried loading font via CSS. It is working but there are character spacing issues in Android WebView. On the web, it is working fine. Check the image for reference. I chose loading font with base64 string because it is easy to inject in the Android Webivew and with font-face API I get a promise that make sure the font is loaded.

   <style>
   @import url('https://fonts.googleapis.com/css2?family=Sono:wght@800&display=swap'); 
   </style>

   

[rajatsangrame]

@bodymovin Can you please check this sample project to Android Webview

[rajatsangrame]

@bodymovin Can you please provide some suggestions to debug this issue? Can you navigate me to the code in lottie.js where the browser is using the default font when the font is loaded in DOM?