• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Feast Design Co.

WordPress Themes for Food & Lifestyle Bloggers

  • Themes
  • Feast Plugin
  • Blog
  • Support
  • Tutorials
  • Nav Social Menu

    • Email
    • Facebook
    • Instagram
    • Twitter
menu icon
go to homepage
  • Feast Plugin
  • Support
  • Tutorials
  • Account
    • Facebook
    • Instagram
    • Twitter
  • search icon
    Homepage link
    • Feast Plugin
    • Support
    • Tutorials
    • Account
    • Facebook
    • Instagram
    • Twitter
  • ×

    Home » Food Blog Design and Appearance

    Feast Plugin: Disable Theme Google Fonts

    Published: Mar 27, 2019 · Modified: Feb 9, 2022 by Skylar · Leave a Comment

    Implements the Manually disable Google fonts tutorial without editing code.

    All sites in 2021 and beyond should use the System Font setting in the Feast Plugin to override the theme fonts, which eliminates:

    • font-related CLS
    • pagespeed-related issues due to font downloads
    • European GDPR violations from using Google-hosted Google Fonts
    • missing character issues with fraction conversions in certain fonts
    • enhance user experience by using a default familiar, legible font used by all devices

    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
    • Why disable custom fonts
    • Why not to disable custom fonts
    • Implementing an updated version of Google Fonts
    • Self hosted fonts
    • Further reading
    • Cook'd Pro
    • Update: filter

    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:

    1. Download and self-host the font
    2. 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.

    Update: filter

    As of Feast Plugin 5.7.2, the checkbox in the Feast Plugin settings page has been removed, and disabled. You can still enable it using the following filter, added to your Code Snippets plugin:

    add_filter( 'feast_disable_google_fonts', '__return_true' );

    Note: All sites should now be using the System Fonts setting, which is an enhancement of this feature.

    More

    • Horizontal scrolling
    • Subscribe button
    • Favicon
    • FSRI Block

    Reader Interactions

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    Primary Sidebar

    Themes

    • Feast Plugin grants access to all 5 themes
    • Not sure where to start? See the getting started guide

    Feast Plugin

    • Feast Plugin
    • Modern Homepage
    • Modern Sidebar
    • Modern Footer
    • Modern Mobile Menu
    • Modern Menu
    • Modern Recipe Index
    • Modern Categories
    • Modern 404
    • Recipe Update Checklist
    • Recipe Post Template

    Resources

    • Image optimization
    • Recipe Guidelines for Foodie Bloggers
    • How to write a recipe post
    • Page headings
    • SEO for Food Bloggers
    • Tutorials
    • Pagespeed Audit
    • Comments
    • Internal links

    more resources →

    Categories

    • Modern Recipe Index
    • Modern Categories
    • Posts per Page
    • How to use categories
    • Category pages need content
    • How to configure the category pages
    • Food blog site structure
    • Food blog page structure

    Classic themes

    The classic themes are only for hobby sites and any food blog interested in monetizing or SEO needs the Feast Plugin.

    • Foodie Pro Classic
    • Brunch Pro Classic
    • Cook'd Pro Classic
    • Cravings Pro Classic
    • Seasoned Pro Classic

    Footer

    ↑ back to top

    Topics

    • Food Blog Design and Appearance
    • Productivity
    • Tech and Plugins
    • Food Blogging and Promotion
    • Minimalist WordPress Themes
    • Simple WordPress Themes
    • Travel blogs
    • Knitting + DIY blogs

    Help

    • Documentation & Tutorials
    • Food Blogging Resources
    • Open A Support Ticket
    • Login
    • Your Account
    • Subscriptions
    • Downloads
    • Discounts and Coupons
    • Compatibility

    Company

    • Subscribe to newsletter
    • Privacy Policy
    • Refund policy
    • Terms & Conditions
    • Principles and Best Practices
    • Affiliates
    • Contact

    Copyright © 2023 · Feast Design Co.

    Results not typical or guaranteed. Our themes and plugins are just a small part of the overall effort involved in running a food blog. Nothing on this website shall constitute legal or financial advice, always consult a local lawyer and accountant. Accessing this website and all transactions herein are under the laws and jurisdiction of Toronto, Ontario, Canada.