Why the family-font reloads when other elements change in React?

I am working in a web where I have a component, with position fixed, that appear after the section is loaded, changing the parent state via handleIndication() call, as shown below.

The problem comes when it appear. In that moment, all the fonts of Hero section select the font-family's fallback for a second, making jump all the content, and then come back to the @font-face defined.

I have tried set the font-display to block, but it doesn´t work since all the fonts have been loaded by the time the new element appear.

Any idea why this insertion is causing the font to reload and how to fix it?

const Home = (props)=>{
useEffect(()=>{
    async function waitToIndicate(){
        await new Promise(() => {
            setTimeout(() => {
                props?.handleIndication()
            }, 6000);
        });
    }
    waitToIndicate();
},[])

return(
    <>
       <Section position="relative" padding="0px 0px" smPadding="0px 0px">
            <HomeImages/>
            <Hero/>
        </Section>
    </>
)}export default Home;

Note: The element appear because it changes its display from none to block, triggered by the handleIndication() function. Also is important to point out that the changing of family-font has been insured testing in debugger mode, so it isn't width or height issue.

Thanks in advance!!