Show text even if Google fonts haven't loaded yet

When a webpage refers to external fonts, like Google fonts, it takes some time to retrieve them. While this happens the browser might wait to display text depending on those fonts.

This behavior can be controlled with the font-display CSS property. Since CSS for Google fonts is part of the downloaded resource you can't set this property directly in your CSS.

Instead its must be passed as parameter in the URL for the Google font, like this:

@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed&display=fallback');

Here the value fallback is used, which only allows an extremely small blocking period.

Using a value that displays text while loading also improves the score of the performance audit of Google Chrome.