Some fonts need to be downloaded by the browser before they are rendered to the user’s screen. While these fonts are downloading, text needs to be user-visible.
The font-display descriptor can be used to ensure text is user-visible while web fonts are loading by using a fallback font from the user’s system, then replacing it with the custom font once loaded.
Recommendations
Self-host fonts
Move fonts to the theme’s stylesheet so that you may edit them. Examples include icon fonts like Dashicons and Font Awesome.
Add font-display descriptor
Self-hosted fonts can have font-display: swap applied to them, allowing a default text to render, then switch to your custom font when the user has downloaded it.
Google fonts can have the same functionality applied using the following query parameter:
&display=swap
Customizer
Note, if your theme provides Google font options via the WordPress Customizer, and you remove those in favor of self-hosted fonts, you will lose these settings.
We are investigating the possibility of adding the display parameter to the existing customizer functionality.