NextJs - flashing font

Hello!

I have custom font in my webpage, which we uploaded to Builder.io as well, and I also added into my codebase as the font-face:

Here is the video, you can see the description is flashing from Times New Roman to my custom font.
https://gtmetrix.com/reports/2022-barion-com.vercel.app/bGVEGQHG/video

But earlier it was the title


The issue is in my opinion that the font is loaded later (and the font’s name in the Builder is different than in the code), but that should be no problem, because in my code, the font-face should override that.

In the code I tried everything:
Setting font-face

Preload font

Tailwind config font-family
image

Added _document.js as Next.js docs:

Still I can not figure out what can cause the problem, how could we avoid this flashing text and loading our font earlier. Any help is appreciated, I can share with you whole code if neccessary, in private message.

Hi @radikris, can you try adding font-display: block; inside the @font-face declaration? This way the browser will only show the text once the font has loaded.