Defeating Flash of Unstyled Text (FOUT)

Search for a command to run...

I was having the same issue without knowing how to fix it, thanks for the tip. Here is the page, if you want to have a look.
I am glad I could help.
I just wanted to let you know this does have performance impact on your page if it's important to you.
Just be aware it might affect your loading times. Block makes it load longer, that's what swap is actually for.
Yes, I made sure to make that point that it will affect performance/load time.
There’s no harm in doing that. Many websites follow this step to avoid typography flickering.
Thanks for sharing how it’s done.
Have you ever wondered how to set a hotkey to focus an input field in your React application? Follow along to learn how. We'll even handle showing different hotkeys based on whether the user is on a Mac or Windows system. Implementation const SearchI...

As a software engineer, choosing and understanding your text editor is important part of your work, as it impacts your productivity and workflow efficiency. It's like choosing the perfect tool for any trade - you need to know what tool to use and how...

Design systems are essential tools for software engineers as they provide a structured framework for maintaining consistency and coherence in product design. By offering clear guidelines and standards, design systems streamline the development proces...

Let's Build our own real-time page view tracker using Next.js as the frontend framework and a Postgres database hosted by Supabase. One of the best ways to understand how your blog posts are performing is by tracking page views. You can begin to unde...

One of the best ways to drive traffic to your website is to have strong Search Engine Optimization (SEO). You can provide search engines with all the URLs for your website using a Sitemap. This allows for easier indexing and more efficient crawling b...

I noticed when I loaded my personal site without cache, my text would first display without the correct font. It eventually restyle using the original font after everything loaded.

I was originally using a NPM package called typeface-roboto to load my font. This was awesome because I wanted to host the fonts myself instead of pulling from a CDN. I realized the styles included in the package was the reason for my Flash of Unstyled Text (FOUT).
I looked through the code inside the package and checked out the CSS files. Here is an example of how they were adding the font.
@font-face {
font-family: 'Roboto';
font-style: normal;
font-display: swap; /* Line Causing FOUT */
font-weight: 500;
src:
local('Roboto Medium '),
local('Roboto-Medium'),
url('/fonts/roboto-latin-500.woff2') format('woff2'),
url('/fonts/roboto-latin-500.woff') format('woff');
}
I noticed the @font-face styles were using font-display: swap;. When swap is set, the browser will give a very short time to load the font before it uses a fallback. Once the font is fully loaded, it will convert back to the expected font. This option is great from a performance standpoint but might affect user experience. If you set font-display: block, this will increase the amount of time the browser will have to fetch your fonts before it starts displaying anything on the page. block sacrifices performance for user experience.
I pulled all the font files into my project instead of using the NPM package. Then inside my CSS, I loaded the fonts using font-display: block;
@font-face {
font-family: 'Roboto';
font-style: normal;
font-display: block; /* No longer causing FOUT */
font-weight: 500;
src:
local('Roboto Medium '),
local('Roboto-Medium'),
url('/fonts/roboto-latin-500.woff2') format('woff2'),
url('/fonts/roboto-latin-500.woff') format('woff');
}
Since my websites design is heavily focused on typography. I was willing to sacrifice some performance to give my fonts a little more time to load before anything is displayed.
