Preventing FOIT ("Flash of invisible text") when using Foundry Typeface

Hi all,

In an ongoing effort to optimise my pages, I regularly run PageSpeed insights. One of the “potential savings” that PageSpeed comes up with in the performance department, is “ensure text remains visible during webfont load”.

Of course I use Foundry, and he two typfaces I use are locally hosted and defined in the Foundry Typeface stack. PageSpeed’s how-to’s mention that one should alter the CSS that loads the webfont, specifically add font-display: swap; to each and every webfont load:

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url( format('woff2');
  font-display: swap;

Note: the above CSS code is from their example; not my website, so it’s not the code that Typeface generates

You can read more about that here: Ensure text remains visible during webfont load

Now, Typeface generates this code:

Capto_Capture 2022-09-14_04-33-49_pm

and modifies this code to override earlier font settings (?I think?):
Capto_Capture 2022-09-14_04-34-36_pm

How do I insert PageSpeed’s recommended addition in there?


1 Like

Have you enabled the Swap setting in the Self-Hosted font you’re loading?

This setting will add font-display: swap; to the font definition within the CSS that Typeface generates.

Addendum: Don’t forget, Page Insights / Lighthouse / Etc. are not a perfect systems.


I have now, yes.


Thanks as always!



In the future there will be more options here as well.


This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.