Font Flickering on First load in Next js with Fountsource and Material Ui?

Question

I am building one Next.js applications. For styling I am using Material-ui. I am using Inter font from FontSource.

I am facing one flickering problem in this site-

I can't understand why I am seeing this type of flicker?

This is the live url- https://hardjourney.vercel.app/login

Here is my code example-

I install @fontsource/inter this and just call it in my _app.tsx-

//Fonts
import "@fontsource/inter/300.css";
import "@fontsource/inter/400.css";
import "@fontsource/inter/500.css";
import "@fontsource/inter/600.css";
import "@fontsource/inter/700.css";

And then I add this in Material-ui theme-

const theme = createTheme({
    typography: {
        fontFamily: "Inter"
    }
});
export default theme;

Font working but problem it the site load first time without font and then load fonts. What is the problem Where I have to change in my applications. Please help me.

Answer 1

Setting the font-display to auto helped in my case