FOIT, Flash Of Invisible Text or Ensure text remains visible during web font load. Is caused when our site uses a custom font, our visitor’s browser needs to download our custom font files, which are quite large in internet terms. While these are being downloaded our text will be hidden, this causes a FOIT or Flash Of Invisible Text. Suddenly out of nowhere a paragraph appeared. It doesn’t give for a good user experience.

We use a Google font called Nunito which is 229 Kb, this is huge compared to the below screenshot of Page Insights that is 10 times smaller at a minuscule 22 Kb.

Visitors to our site don’t patiently wait for our page to load, instead after 3 seconds they might leave. To avoid this sudden exodus of visitors, we can swap the font to a standard system font, so our visitors have something to read while they wait for the good stuff.

Browsers default solutions

Each browser deals with fonts slightly differently. Some have built in support for FOIT others don’t.

Browser	Default behavior if the font is not ready…
Chrome Firefox	Will hide text for 3 seconds, if the font file is not downloaded then will display the default system font
Edge	Will display the system font until the font file is downloaded
Safari	Will hide text until the font file is downloaded

Browser default FOIT solutions

How to solve FOIT

What Google Page Insights is suggesting when it states ‘Ensure text remains visible during webfont load’. It is for us to clearly state we want to swap the font instead of relying on the browsers default method. We have some options for this solution depending on where we get our fonts.

We can add a simple 1 line to our @font-face CSS
Google fonts allow us to add &display=swap to the end of the font URL. This is now default for any Google font URL, so we may not need to do anything.
Adobe fonts allow us to change the font display value in settings

Google fonts issue

If we are using Google fonts we may find ‘Ensure text remains visible during web font load’ will still appear but the potential saving will reduce. This is because we are asking our users browsers to go somewhere else and fetch the font. The only way to remove this diagnostic is move to a local font.

I.T. Recipes Issue

Though we had implemented the above solution to ‘Ensure text remains visible during webfont load’ we still received this issue every time we used Page Insights. It occurred to us we had set the font (Nunito) inside our grid plugin, PostX. So on the off chance, we changed the font in every grid to nothing. This way we could set the font used in our style.css or Appearance > Customise > Additional CSS. After this change, we crushed our Page Insights performance issue.

PostX did not have the font-display settings, and having all our font settings in one place ensures we are not downloading the font file twice.