Ensure text remain visible during webfont load with font-display

[bagasme]

The swap argument on font-display instruct browsers to use fallback
font for displaying texts until @font-face have been fully downloaded.
Not specifying font-display cause PageSpeed Insights to complain on
"Opportunities" category.

GIF Example on my LXD container:

[6543]

@silverwind what do you think?

[bagasme]

@6543 just make pagespeed happy and for slow internet access

[CirnoT]

https://drafts.csswg.org/css-fonts-4/#font-display-desc

This value should only be used when rendering text in a particular font is very important for the page, but rendering in any font will still get a correct message across. It should only be used for small pieces of text.

This is not really a solution, especially for emoji or CJK fonts which will most likely be rendered using font without necessary character set, which is imo worse than not rendering at all.

[CirnoT]

Our implementation giving URL to download Roboto font is rather poor solution as it seems the browser tends to wait on remote font download rather than use different one from defined list.

Any specific reason why we are explicitly forcing UA to download remote fonts for generic ones like Roboto? @zeripath you introduced that in #6007

[silverwind]

I'd rather like to remove the Roboto webfont and use a system-native font stack. Imho, webfonts are not worth the trouble they bring. We have the option between rendering a invisible font until font has loaded (default browser behaviour) or render system font and accept a flash of wrong font (what this pr does), both seem bad.

[mrsdizzie]

Would also like to remove Roboto webfont

[silverwind]

Created #11818 about native font stack.