Implements the Manually disable Google fonts tutorial without editing code.
Note: this is automatically enabled with the Feast Plugin's System Font option.
This will fall-back to the default font in the theme.
Recommendation: unless you have a compelling reason for doing this, outside of what you've read from us, don't use this.
This also removes the theme's Google Fonts section from the customizer.
Jump to:
System Fonts
We recommend everyone use the System Fonts setting in the Feast Plugin, which automatically disables theme fonts and replaces them with a performance-driven font set.
Why disable custom fonts
The Google Fonts implementation has changed over the years, and the current pagespeed insights report throws a flag for how Google Fonts were implemented into the themes years ago.
The simplest solution to resolve this is to simply disable Google Fonts. Say bye-bye to custom fonts, which have a questionable benefit to the reader, and thereby improve your pagespeed.
CLS is a major issue in 2020 and beyond, and choosing the wrong Google Font can cause significant CLS issues.
Why not to disable custom fonts
Custom fonts are a part of the overall branding of your website, and contribute to the overall first impressions readers have.
Don't disable Google Fonts if the benefit you get from the custom font outweighs the pagespeed penalty. That's a decision only you can make.
In our opinion, you can worry about this once you've reached a level of income where you can afford to pay someone to handle it for you.
Implementing an updated version of Google Fonts
We haven't found any tutorials online simple enough to implement via the plugin.
Due to the complexity number of decisions to be made about which fonts and subsets and font-weights you need personally, the only way to implement a modern, up-to-date webfont is either to:
- Download and self-host the font
- Make a complex set of decisions to determine which weights and subsets you need, then implement it
This is outside the scope of what we're able to offer.
Self hosted fonts
Self-hosting fonts uses third-party tools we haven't been able to test or verify adequately. It also comes with some very complex research on font licenses and what can and can't be used, and how attribution works.
At this time, we're in no position to support or make recommendations on how to implement self-hosted fonts.
See: why self-hosting fonts isn't recommended by WP Rocket
Further reading
This is honestly a waste of time for bloggers, but if you have nothing better to do, here's some reading:
- https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization
- https://dev.to/kelli/how-to-self-host-google-fonts-on-your-own-server-d4i
- https://opensource.com/article/19/3/webfonts
- https://css-tricks.com/google-fonts-and-font-display/
- https://developers.google.com/web/updates/2016/02/font-display
- https://www.industrialempathy.com/posts/high-performance-web-font-loading/
We haven't verified and don't recommend or support any of the above links.
I can't stress this enough - this is a deep, dark rabbit hole that's going to make you frustrated. There are no easy solutions to this right now.
Unless you're making enough disposable income to hire a developer who can implement this for you, do not waste your time with this.
Cook'd Pro
The Cook'd Pro theme menu uses FontAwesome in the search bar, which gets removed when you enable system fonts.
To solve this, we recommend using the Modern Menu on desktop as well as mobile.
Leave a Reply