Google Lighthouse notifies the user of the situation by flagging the relevant page if a text is invisible during the font-display process. As follows:
How to pass the audit? – Showing the invisible text
In order to prevent the text from becoming invisible during the function loading process of a web page, you can assign a temporary font to that text to display in such cases. When you do this, the easy to install temporary and basic font will increase the user’s experience. To do this, you need to add font-display: swap in @font-face style. Check out the example below:
@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; }
Font display API is a system that determines how a font will appear on your web page. Thanks to this system, the basic font is used while loading. With the installation of the custom font, the system automatically turns to it.
Preload web fonts
You can use <link rel = "preload"> to use font files that can be loaded early on your web page.
Google Fonts
You can use this font by adding a parameter to the end of the Google font URL. The parameter to be added is &display = swap. Here is an example:
Having browser support
A little note: Not all browsers may support font-display. In such a case, you need to use a few additional methods to solve the text invisible problem. What exactly do you have to do? For this, you need to reduce the flash in invisible text codelab.