# NextJs - flashing font

**URL:** <https://forum.builder.io/t/nextjs-flashing-font/2263>\
**Category:** Technical Questions\
**Tags:** visual-editor, nextjs\
**Created:** [June 14, 2022, 6:12am UTC](https://forum.builder.io/t/nextjs-flashing-font/2263 "2022-06-14T06:12:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![radikris](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@radikris](https://forum.builder.io/u/radikris)\
**Post date:** [June 14, 2022, 6:12am UTC](https://forum.builder.io/t/nextjs-flashing-font/2263/1 "2022-06-14T06:12:41Z")

</div>

Hello!

I have custom font in my webpage, which we uploaded to [Builder.io](http://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](https://gtmetrix.com/reports/2022-barion-com.vercel.app/bGVEGQHG/video)

But earlier it was the title

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/6/641f04d6d82cd2b53725fc08006a5541576791e6.jpeg)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/f/f5ee579d46283396b4402948416016aa2d5e25a5.png)

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/7/7dc7eb588d673e8a1d1e8e56f1050ca4c655d00f.png)

Preload font

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/0/0a929b6d40da5d017a5217b46f2bbbb9caf41d98.png)

Tailwind config font-family  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/4/4b7899df36d0cfc479db786f273c69c44fb135e9.png)

Added \_document.js as Next.js [docs](https://nextjs.org/docs/advanced-features/custom-document):

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/6/6fd44dcc79c8537b64ec7ca324be2ef3aef2a84e.png)

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.

---

<div class="post-metadata">

**Author:** ![sarah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/sarah/32/1198_2.png) [@sarah](https://forum.builder.io/u/sarah)\
**Post date:** [June 15, 2022, 5:52pm UTC](https://forum.builder.io/t/nextjs-flashing-font/2263/2 "2022-06-15T17:52:53Z")

</div>

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.