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

[Erwin-Leerentveld]

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(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) 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:

and modifies this code to override earlier font settings (?I think?):

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

Cheers,
Erwin

[elixirgraphics]

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.

[Erwin-Leerentveld]

coughs
I have now, yes.

Thanks as always!

Cheers,
Erwin

[elixirgraphics]

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