Optimize font-loading techniques for all WordPress Twenty themes

[mvanturnhoutziggonl]

Right now, I'm using the Twenty Seventeen theme for several websites and the Google Font Libre Franklin, included in that theme, is loaded like this:

<link rel=stylesheet id=twentyseventeen-fonts-css  href='https://fonts.googleapis.com/css?family=Libre+Franklin%3A300%2C300i%2C400%2C400i%2C600%2C600i%2C800%2C800i&#038;subset=latin%2Clatin-ext' type=text/css media=all>

For performance reasons, given as this is a font which already has fallbacks defined in the body property, it'd be better to add display=swap and rel=preload

to this link. Few links:
​https://developers.google.com/web/updates/2016/02/font-display
​https://developers.google.com/web/updates/2016/03/link-rel-preload
​https://addyosmani.com/blog/google-fonts-font-display/

These small steps will massively increase performance and PageSpeed scores for every core theme implementing these changes for their Google Fonts.

[joyously]

See ticket #47282 for the swap.

And take a look at this support topic for the preload: ​https://wordpress.org/support/topic/preload-font-site-speed-issue/

[sabernhardt]

#55985 replaces Google Fonts URLs, which would make preload less valuable than before.

Choosing precisely which font files everyone would need could be tricky, both with different character subsets and with browser support of WOFF2 vs. WOFF. I opened #57807 in case the (previously) existing translations could be valuable to developers who want to use preload in individual sites or plugins. However, I'm not sure it's worth trying that in the themes now.

For the font-display property, I agree with the decision on #47282 to make fallback the default choice (at least for Twenty Twelve to Twenty Seventeen). The swap value is better for something where the font is highly important, such as a logo, and site owners did not select these fonts themselves.