This is a feature of the Feast Plugin
Note: this feature is still in BETA for testing and bug fixes and not officially recommended. We expect it to be ready sometime in January 2020. Subscribe to the newsletter to be notified of its release.
The fonts implementation in the themes were implemented using best practices at the time they were developed, which was around 2016.
The web of 2016 is not the same as the web of 2020.
While the functionality was useful and simple at the time, we now consider it outdated. Unfortunately, no easy alternative exists due to the complexity involved in selecting and combining the appropriate fonts and variations.
What problem does this solve?
Google has changed their recommended implementation of Google Fonts, and now throws a warning in pagespeed insights if you followed their historical implementation.
The two documents they provide for guidance for this are:
This is a little confusing, because the speed index page claims that this can have a big impact, while the actual pagespeed insights tool claims that it doesn't.
Why is this in the plugin rather than themes?
As of 2019, recommendations have changed to add additional parameters such as display-swap. Unfortunately, because this is coded into the themes, we have no way to update this for our customers.
To highlight this, we were recently made aware of a bug that crashed certain browsers, which we were able to resolve in the 4.3.0 theme updates. However, bloggers need to manually update the theme to apply this fix. This raised the concern that we need to provide a more modern alternative
Finally, each theme has a slightly different implementation (and none at all in Cook'd), which means that we can either fix this once in the plugin and update regularly moving forward, or spend 5x as long implementing a version into 5 themes, which will be out of date again in 12 months.
That's where the Feast Plugin shines. By building the modern implementation into the plugin, we can modify it through an update when it becomes necessary at some point in the future.
This functionality, when built into the plugin, becomes consistent across all themes, reducing anxiety involved in selecting a theme.
Problems with the theme implementation
The theme implementation was cutting edge when first implemented, but suffers from a few issues that weren't important back then:
- External connection - DNS connection download
- Runs code on each page load - fetch from database, parse, output (rather than serve cached result)
- Susceptible to FOIT (flash of invisible text) - resolved by font-swap
#1 was somewhat mitigated by the fact that shared external resources (such as Google Fonts) were sometimes cached by the browser. Recent privacy concerns means that browsers will no longer accept this behavior, which means font assets will no longer be cached and shared between websites.
#2 is not a best practice, but in all likelihood has very little relative impact on pagespeed and response times. Removing this would be a minor optimization, whose benefit would only really be noticeable in conjunction with the dozens of other optimizations we've made. Nevertheless, we want to do anything we can to improve pagespeed.
#3 is not something I've ever personally noticed, but is important enough that Google flags this in their Pagespeed Insights tool.
What's important to note here is that despite these issues, the theme's Google Fonts does not impact pagespeed when our recommended WP Rocket settings are enabled. The demo sites are able to hit 99/100 and 100/100 on the pagespeed insights tool despite this warning being there.
Taking it a step further
Google recently updated their fonts user interface to make downloading fonts much simpler.
Rather than continue loading fonts hosted externally, which slow pagespeed by adding a DNS call and connecting to an HTTPS server, some more advanced users may find it beneficial to self-host the fonts.
Self-hosting the fonts not only decreases page load times by removing external connections, it also safeguards your font choice against updates and edits may make to their fonts.
This is currently far too technical for us to provide support for, so we'll recommend advanced users follow this guide on self hosting Google Fonts.
By splitting this into a separate module, we're able to begin modifying the block editor styling to include the Google Fonts you've selected on both the front-end and in the block editor styling, for a more consistent post writing experience. This isn't currently implemented, but will be released in a future update.