Proposal: Insert font-display:swap for Google Fonts CSS inlining

[keesspoelstra]

Lighthouse and other tools complain about google fonts not supporting font-display:swap. I've recently implemented a script which rewrites the inlined Font css, adding the font-display:swap to the style rules, if it is inlined. This gives immense improvement on webpagetest.org and Lighthouse.

As we inline the CSS we also have the possibility to rewrite the css when it is stored in the cache. I'd imagine having a content callback on the cache item (next to the header callback) and replacing the value with the rewritten CSS. The font-display value should be configurable on the filter or even on the link tag to make the configuration granular.

Warning: This will give an inconsistent user experience, first request will be with FOIT, next requests will be with FOUT, as we cannot rewrite external stylesheets

Thoughts?

[keesspoelstra]

This could also be applied to local fonts if changing the stylesheets is not easy. Looking at the profile trace and doing it by script immediately after the style loads seems to have a relatively little impact.

[Lofesa]

Hi @keesspoelstra Well, you can use <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" now.

[tomasdev]

@Lofesa it is lost when inlininig fonts.

[Lofesa]

@tomasdev I see, the inline option relies in a third party library ( in the code tree third_party/css_parser/ ) that don´t take account of the display attribute in the css for fonts. I think this library don´t know nothing about font-display.