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/