Web Fonts should default to font-display: swap

[addyosmani]

Developer request: https://twitter.com/cramforce/status/910962151958835200

If a browser supports CSS Font Display, we should consider making font-display: swap the default value used in @font-face descriptors. This would be a backwards-compatible change.

This intervention would ensure self-hosted Web Fonts have a zero second block period and an infinite swap period. Browsers would draw text immediately with a fallback used if the font face isn't loaded, but swap as soon as it does load.

Per @KenjiBaheux, It would be great if this could help with third-party Web Fonts too (e.g Google Fonts), but that's a different conversation as we need something like this proposal to get traction.

cc @igrigorik @cramforce

[cramforce]

Another possible intervention is to have a short hard coded list of URL patterns for CSS from Google Fonts, Font Awesome, TypeKit, etc. to never block page load. AMP does this quite successfully. It currently gives font providers 250ms to provide their font-face CSS and otherwise makes it non-blocking (which effectively produces font-display: swap beahvior).

[johannhof]

(As noted in #72, we intend to archive this repository and are thus triaging and resolving all open issues)

I don't think that this needs to be tracked at a standards-level, since auto allows browsers to experiment with any behavior. I filed w3c/csswg-drafts#7234 for improving wording in the css-fonts spec.