Avoid hidden text when loading fonts

It takes time to load large fonts.Most browsers hide text until the font is fully loaded.This problem is called Flickering of Invisible Text (FOIT).

We can prevent it from happening by asking the browser to use the system font while the custom font is still loading.Once the font is loaded, it will replace the system font used previously.This phrase is also known as flashing of unstyled text (FOUT).

To archive it, we can use the following `font-display` style:

@font-face {font-family: 'Roboto';font-display: swap;}

If you are using Google fonts, then placing the `display=swap` parameter is the equivalent way: