Opened 12 months ago
Last modified 12 months ago
#49175 new enhancement
Optimize font-loading techniques for all WordPress Twenty themes
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Awaiting Review | Priority: | normal |
Severity: | normal | Version: | 5.3.2 |
Component: | Bundled Theme | Keywords: | |
Focuses: | performance | Cc: |
Description
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.
Note: See
TracTickets for help on using
tickets.
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/