[wp-trac] [WordPress Trac] #49175: Optimize font-loading techniques for all WordPress Twenty themes

[WordPress Trac]

#49175: Optimize font-loading techniques for all WordPress Twenty themes
---------------------------------+-----------------------------
 Reporter:  mvanturnhoutziggonl  |      Owner:  (none)
     Type:  enhancement          |     Status:  new
 Priority:  normal               |  Milestone:  Awaiting Review
Component:  Bundled Theme        |    Version:  5.3.2
 Severity:  normal               |   Keywords:
  Focuses:  performance          |
---------------------------------+-----------------------------
 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&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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/49175>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform