Flash of unstyled content

App Building
1

We have a stepped container that hosts a custom component. The custom component loads Google fonts:

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">

Right now we are facing the dreaded Flash of unstyled content issues - where the content gets rendered in the wrong font for half a second and then is re-styled with the Google font.

Is there any good way to delay the rendering of the custom component, until the google font is loaded

2

Haven't tested it in a Retool context but changing display=swap to display=block in the font's href attribute might do the trick, re: font-display, i.e.:

font-display: swap
  • swap: Instructs the browser to use the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.
font-display: block
  • block: Instructs the browser to briefly hide the text until the font has fully downloaded. More accurately, the browser draws the text with an invisible placeholder then swaps it with the custom font face as soon as it loads. This is also known as a “flash of invisible text” or FOIT.