Close Menu
    Explore the coolest frontend learning platform !
    Visit NamasteDev
    Thursday, April 3

    How to Eliminate Flash of Unstyled Text (FOUT) with Preload

    Article 771 Comments2 Mins ReadAnkit MittalBy

    Understanding the Flash of Unstyled Text (FOUT)

    Have you ever noticed that when a website loads, the text initially appears in the browser’s default font before switching to the site’s specified font? This phenomenon, known as Flash of Unstyled Text (FOUT), can be a jarring experience for users and detracts from the site’s overall polish.

    Why Does FOUT Happen?

    FOUT occurs because the browser prioritizes loading other resources over your custom font files. As a result, the custom font is applied only after it has been fully loaded, leading to a noticeable shift from the default font to the custom font.

    The Solution: Using Preload

    To prevent FOUT, you can instruct the browser to load your font files as a priority. This is achieved using the rel=”preload” attribute in your HTML. By preloading your fonts, you ensure they are fetched earlier in the page load process, allowing the text to render with the correct font from the start.

    Implementation Example

    you are creating a simple website and on that website, you have two files first is index.html and second is index.css. Now we want to use fonts on our website and the most common way to add font is something like this-

    <link as="font" href="https://fonts.googleapis.com/css?family=Sofia">

    or you can add font using the font-face method –

    @font-face { font-family: Sofia; src: URL(https://fonts.googleapis.com/css?
family=Sofia); }

    Now when your website renders the files there is a possibility that your font file will not fetch on priority and you will face problem of unStyled text. to solve this you can you use preload.

    <link rel="preload" as="font" href="https://fonts.googleapis.com/css?
family=Sofia" type="font/woff2" crossorigin="anonymous">

    Key Points to Remember

    1. Preload Only Critical Fonts: Use preload only for the fonts essential for initial rendering. Overusing preload can lead to other critical resources being delayed.
    2. Specify the Type and Crossorigin: Ensure you specify the type of font and add crossorigin=”anonymous” if the font is hosted on a different origin.

    Conclusion

    By preloading your font resources, you can significantly improve the user experience on your website by eliminating FOUT. This simple yet effective technique ensures that your custom fonts are loaded as a priority, providing a seamless and visually consistent experience from the moment your page starts to load. Happy coding!

    Keep Reading

    View 771 Comments

    771 Comments

    606. Josephtex on

      Игра РЅР° деньги — это ваше развлечение.: balloon game – balloon игра

      Reply
    608. Martyhap on

      Игровые автоматы делают вечер незабываемым.: balloon казино – balloon казино официальный сайт

      Reply
    609. Josephtex on

      Казино — место для увлекательных РёРіСЂ.: balloon game – balloon казино демо

      Reply
    622. Jessevox on

      Выигрывайте большие СЃСѓРјРјС‹ РЅР° автоматах!: balloon игра – balloon казино демо

      Reply
    629. Josephtex on

      Автоматы Ballon поднимают настроение каждому.: balloon игра – balloon игра

      Reply
    767. binance- on

      Thank you for your sharing. I am worried that I lack creative ideas. It is your article that makes me full of hope. Thank you. But, I have a question, can you help me?

      Reply
    Leave A Reply

    Demo

    Courses

    Community

    Contact Us