Make sure fonts use font-display: swap property

[vladolaru]

Related to this: https://wordpress.org/support/topic/swap-font/#post-12961283

Google Fonts have an optional parameter: https://web.dev/font-display/?utm_source=lighthouse&utm_medium=unknown#google-fonts

This is not a CSS property per se, but a @font-face descriptor. So it needs to reside inside the @font-face definition, not in a regular CSS rule.

[vladolaru]

Resources:

• https://www.zachleat.com/web/comprehensive-webfonts/#font-display
• https://css-tricks.com/almanac/properties/f/font-display/

[vladolaru]

It seems that Web Font Loader doesn't support adding this parameter in a nice way (typekit/webfontloader#409). A workaround is to modify the script: https://heiko-frenzel.de/fix-web-font-loader-pagespeed-insights-15782/

But if we give up on Web Font Loader in the frontend, like proposed here #218, we are in the clear. Although we would still need a solution for the Customizer.

[vladolaru]

Fixed this through the use of the new Google Fonts CSS API v2