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

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

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 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.

[siamahnaf198]

I disagree with your answer. If I have to do this then why I am uaing SSR. Then I have to choose react js that is CSR.

[siriwatknp]

I am closing because I don’t think this issue is related to Material UI.

Here are some resources that I think you should take a look:

• https://nextjs.org/docs/basic-features/font-optimization
• https://css-tricks.com/the-best-font-loading-strategies-and-how-to-execute-them/