'Prevent fallback font showing when loading google fonts

In my <head> I have:

<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

with the CSS:

* {
   margin: 0;
   padding: 0;
   font-family: 'Press Start 2P', cursive;
}

Annoyingly if I load without cache it always flashes to cursive first even though display=swap is supposed to stop this.

I have also tried adding:

html.wf-loading * {
   opacity: 0;
}

But I don't think that is even set. The only way I have managed to prevent any flashing is by doing this:

<body id="body" style="display: none;" onload="document.querySelector('#body').style.display = '';">

Which is not what I want.

Example when holding cmd-shift-R (forcing no cache):

html css fonts

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Solution	Source