Font Flickering on First load in Next js with Fountsource and Material Ui?
See original GitHub issueDuplicates
- 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.
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:9 (1 by maintainers)
Top Results From Across the Web
Font Flickering on First load in Next js with Fountsource and ...
I am building one Next.js applications. For styling I use Material-ui . I use Inter font from FontSource. I am facing one flickering...
Read more >Font Flickering on First load in Next js with Fountsource and ...
For styling I am using Material-ui . I am using Inter font from FontSource . I am facing one flickering problem in this...
Read more >How to fix font flickering on NextJS
This fixes the flickering font when we open the webpage for the first time! This is the last step and the most important...
Read more >Flash Of Unstyled Text (FOUT) on reload using next.js and ...
This means no Flash Of Unstyled Text (FOUT) but on slower connections a fallback font will be used on first load instead. <head>...
Read more >How to get a flickerless persistent dark mode in your Next.js ...
How to get a flickerless persistent dark mode in your Next.js app (example with MUI) ... Note that this tutorial is made with...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
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: