Font render issue after updating text without using glyphs

[rajatsangrame]

I am using updateDocumentData() to modify the text dynamically. For the browser's default font, the text is rendering properly but after updating the text I am facing this issue. I am facing issue with every font and every browser.

Default Font:

With Custom Font:

JSON Data

JS Code:**

<script>

        //loadEmbedeFont()
        loadFont()

        let animation
        fetch('./data01.json')
            .then((response) => response.json())
            .then((json) => {
                loadJsonData(json)
                updateText()
            });

        function loadFont() {
            const fontName = 'Poppins-Bold';
            const style = document.createElement('link');
            style.rel = 'stylesheet';
            style.href = `https://fonts.googleapis.com/css?family=Poppins`;
            document.head.appendChild(style);
        }

        function loadJsonData(json) {

            animation = bodymovin.loadAnimation({
                container: document.getElementById('myElement'),
                renderer: 'svg',
                loop: false,
                autoplay: true,
                animationData: json,
                name: "Hello World",
            })
        }
        function updateText() {
            animation.renderer.elements[0].updateDocumentData({t: 'Domestic LPG price hiked by Rs 50 per 14.2-kg cylinder, first hike since July 2022' }, 0);
            animation.setSpeed(0.2);
            animation.play();
        }

        function loadEmbedeFont() {

            fetch('./fonts/poppinsbase64.txt')
                .then((response) => response.text())
                .then((base64) => {
                    //let url = "url(" + base64 + ")";
                    let url = "url(data:font/truetype;charset=utf-8;base64," + base64 + ") format('truetype')";
                    //let molotFont = new FontFace('Poppins-Bold', 'url(./fonts/Poppins-Bold.otf)')
                    let molotFont = new FontFace('Poppins-Bold', url)
                    molotFont.load().then(function (loadedFace) {
                        // use font here
                        document.fonts.add(loadedFace)
                        //console.log(document.fonts)
                    }).catch(function (error) {
                        console.log(error)
                    });
                });
        }

    </script>

[rajatsangrame]

This is fixed. I used base64 font string and made sure the animation is rendered after the font is loaded.

fetch('./fonts/poppinsbase64.txt')
                .then((response) => response.text())
                .then((base64) => {
                    let url = "url(data:font/truetype;charset=utf-8;base64," + base64 + ") format('truetype')";
                    let molotFont = new FontFace('Poppins-Bold', url)
                    molotFont.load().then(function (loadedFace) {
                        console.log(document.fonts)

                        fetch('./data01.json')
                            .then((response) => response.json())
                            .then((json) => {
                                loadJsonData(json)
                                updateText()
                            });
                    }).catch(function (error) {
                        console.log(error)
                    });
                });