The fonts we load from Google Fonts don't specify the "font-display: swap" rule. As a result the text is not shown until the font is loaded, causing a flash of whitespace (aka a FOIT). This can be fixed by requesting the fonts with "&display=swap" in the url, causing google to add the property to the css response.

The result will be that instead of flashing with no text, the text will flash with a local font instead.

To reduce the length of this flash, we can also add a preload tag for the script. This makes sense to do as the font is needed above the fold on pretty much every page.

tasks:

• Add the &display=swap parameter to the google fonts urls
• Check if preload tag on the fonts has any negative impacts, if not add it.